Tôi nên thêm nhiều phần tử giống nhau vào div bằng jQuery

Question

Tôi cần thêm nhiều div trống vào phần tử vùng chứa bằng cách sử dụng jQuery.

Hiện nay tôi đang tạo ra một chuỗi chứa html trống sử dụng một vòng lặp

divstr = '<div></div><div></div>...<div></div>'; 

và sau đó tiêm đó vào container của tôi:

$('#container').html(divstr); 

Có cách thanh lịch hơn để chèn nhiều , các yếu tố giống nhau?

Tôi hy vọng sẽ tìm được thứ gì đó sẽ không làm hỏng chuỗi nhưng sẽ không khiến trình duyệt quỳ xuống. Plugin .repeat() có dây chuyền?

Answer 1

Nếu bạn muốn IE nhanh hoặc thường xem xét tốc độ, thì bạn sẽ muốn tạo đoạn DOM trước khi chèn nó.

John Resig giải thích kỹ thuật này và bao gồm một điểm chuẩn hiệu suất:

http://ejohn.org/blog/dom-documentfragments/

var i = 10, 
    fragment = document.createDocumentFragment(), 
    div = document.createElement('div'); 

while (i--) { 
    fragment.appendChild(div.cloneNode(true)); 
} 

$('#container').append(fragment); 

Tôi nhận ra nó không phải làm rất nhiều công dụng của jQuery trong việc xây dựng các đoạn, nhưng tôi đã chạy một vài bài kiểm tra và tôi dường như không thể làm $ (fragment) .append() - nhưng tôi đã đọc bản phát hành jQuery 1.3 của John được cho là bao gồm các thay đổi dựa trên nghiên cứu được liên kết ở trên.

Answer 2

Bạn có thể sử dụng vòng lặp thông thường với hàm Jquery append.

for(i=0;i<10; i++){ 
    $('#container').append("<div></div>"); 
} 

Answer 3

Cách nhanh nhất để làm điều này là xây dựng nội dung trước tiên bằng chuỗi. Nó là MUCH nhanh hơn để làm việc với các chuỗi để xây dựng đoạn tài liệu của bạn trước khi làm việc với DOM hoặc jquery cả. Thật không may, IE làm một công việc thực sự nghèo của chuỗi nối, vì vậy cách tốt nhất để làm điều đó là sử dụng một mảng.

var cont = []; //Initialize an array to build the content 
for (var i = 0;i<10;i++) cont.push('<div>bunch of text</div>'); 
$('#container').html(cont.join('')); 

Tôi sử dụng kỹ thuật này một tấn trong mã của tôi. Bạn có thể xây dựng các đoạn html rất lớn bằng cách sử dụng phương pháp này và nó rất hiệu quả trong tất cả các trình duyệt.

Answer 4

Bạn có thể bọc một mảng JavaScript gốc trong một jQuery và sử dụng map() để biến nó thành một jQuery (danh sách các nút DOM). Điều này được hỗ trợ chính thức.

$(['plop', 'onk', 'gloubi']) 
.map(function(i, text) 
{ 
    return $('<div/>').text(text).get(0); 
}) 
.appendTo('#container'); 

này sẽ tạo

<div id="container"> 
<div>plop</div> 
<div>onk</div> 
<div>gloubi</div> 
</div> 

Tôi thường sử dụng kỹ thuật này để tránh lặp lại bản thân mình (DRY).