tạo thẻ span và chèn với Jquery

Question

Tôi đang cố gắng điền một thẻ span mà tôi đã chèn vào trang của tôi với jquery.

tôi đã cố gắng này

var span = $('<span />').attr({'className':'folder_name' , 'text':'favre' }); 
var insert= 
$('<div/>', { 
    className: "folder", 
    html: span 
}); 

mà mang lại kết quả này.

<div classname="folder"> 
<span classname="folder_name" text="favre"></span> 
</div> 

---

sau đó tôi đã cố gắng này

var span = $('<span />').attr({'className':'folder_name', 'html':'Elway' }); 

mà mang lại này

<div classname="folder"> 
<span classname="folder_name" html="Elway"></span> 
</div> 

những gì tôi đang cố gắng để có được dưới

<div classname="folder"> 
<span classname="folder_name" >**Elway**</span> 
</div> 

Answer 1

HTML của một đối tượng không phải là một thuộc tính và cần phải được cung cấp riêng rẽ:

var span = $('<span />').attr('className', 'folder_name').html('Elway'); 

Ngoài ra, className không phải là một thuộc tính hợp lệ, bạn có nghĩa class thay vào đó, nếu có thì sử dụng này:

var span = $('<span />').addClass('folder_name').html('Elway'); 

Answer 2

cố gắng thêm html vào cuối

var span = $('<span />').attr({'className': 'folder_name').html('html here'); 

đề nghị bởi Rory McCrossan

nếu bạn đang sử dụng thuộc tính của riêng mình thay vì nó, phát minh các thuộc tính của riêng bạn sẽ làm cho trang không hợp lệ và dẫn đến các vấn đề khác. Nếu bạn cần tạo thuộc tính của riêng bạn sử dụng data-*

nhưng nếu nó là lớp hơn thay đổi nó để class

Answer 3

tôi thích phương pháp 'createElement' của JS bản địa. Đây là nhanh hơn so với phương pháp jQuery một mình

var $span = $(document.createElement('span')); 
$span.addClass('folder_name').html('Elway'); 

Answer 4

Hãy thử với:

var span = $('<span />').attr('class', 'folder_name').html('Elway'); 

Một jsFiddle

Answer 5

var span = $('<span />',{ 
    className:'folder_name' , 
    html:'Elway' 
}); 

var insert = $('<div/>', { 
    className: "folder", 
    html: span 
}); 

DEMO

Answer 6

Bạn cũng có thể tạo ra một chuỗi HTML và gắn nó vào phần tử mục tiêu:

var html = '<div class="folder">' + 
       '<span class="folder_name">Text</span>' + 
      '</div>'; 

$('body').append(html); 

Answer 7

Tôi không khuyên bạn nên sử dụng các thuộc tính tùy chỉnh như className, tôi tin rằng đó là thực hành tiêu chuẩn để thêm tiền tố vào bất kỳ thuộc tính tùy chỉnh cần thiết nào với data-. Điều đó đang được nói, bạn có thể sử dụng phương pháp jquery $.append() để đạt được mục tiêu của mình.

Dưới đây là một ví dụ cơ bản:

var div = $('<div />', { 'className':'folder' }) 
.append('<span className="folder-name">Elway</span>'); 

$('body').html(div); 

Liên kết đến tài liệu jQuery trên thêm:

http://api.jquery.com/append/