Как мне добавить несколько одинаковых элементов в div с помощью jQuery

Question

Мне нужно добавить несколько пустых элементов div к элементу контейнера, используя jQuery.

На данный момент я генерирую строку, содержащую пустой HTML, используя цикл

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

, а затем вводить это в мой контейнер:

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

Есть ли более элегантный способ вставить несколько одинаковых элементов?

Я надеюсь найти что-то, что не сломало бы цепочку, но не поставило бы браузер на колени. Плагин .repeat() с цепочкой?

Answer 1

Если вы хотите, чтобы IE был быстрым - или, как правило, учитывает скорость, то вам нужно сначала создать фрагмент DOM, прежде чем вставлять его.

Джон Резиг объясняет методику и включает в себя тест производительности:

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);

Я понимаю, что он не использует jQuery для создания фрагмента, но я выполнил несколько тестов и не могу выполнить $ (фрагмент) .append () - но я прочитал Предполагается, что выпуск Джона jQuery 1.3 будет включать изменения, основанные на исследовании, связанном выше.

Answer 2

Вы можете обернуть собственный массив JavaScript в jQuery и использовать map (), чтобы преобразовать его в jQuery (список узлов DOM). Это официально поддерживается.

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

Это создаст

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

Я часто использую эту технику, чтобы избежать повторения (СУХОЙ).

Answer 3

Самый быстрый способ сделать это - сначала создать контент со строками. Гораздо быстрее работать со строками для создания фрагмента документа, прежде чем вообще работать с DOM или jquery. К сожалению, IE плохо справляется с конкатенацией строк, поэтому лучший способ сделать это - использовать массив.

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(''));

Я использую эту технику тонну в своем коде. С помощью этого метода вы можете создавать очень большие фрагменты HTML, и это очень эффективно во всех браузерах.

Answer 4

Вы можете использовать обычный цикл с функцией Jquery append .

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