我应该如何使用jQuery向div添加多个相同的元素

Question

我需要使用jQuery将多个空div添加到容器元素.

目前我正在使用循环生成包含空html的字符串

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

然后将其注入我的容器中:

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

是否有更优雅的方式来插入多个相同的元素？

我希望找到一些不会破坏链接的东西,但不会让浏览器瘫痪.一个可链接的.repeat()插件？

Answer 1

如果你想让IE快速 - 或者通常考虑速度,那么你需要在插入之前先构建一个DOM片段.

John Resig解释了该技术,并包含了一个性能基准:

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,但是我运行了一些测试而且我似乎无法做$(fragment).append() - 但我已经阅读了John的jQuery 1.3发布应该包括基于上面链接的研究的变化.

Answer 2

最快的方法是首先使用字符串构建内容.在使用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 3

您可以将本机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>

我经常使用这种技术以避免重复自己(DRY).