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

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

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

divstr = '
...
'; 

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

 $('#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('
bunch of text
'); $('#container').html(cont.join('')); 

我在代码中使用了这种技术。 您可以使用此方法构建非常大的html片段，并且在所有浏览器中都非常高效。

Answer 3

您可以将本机JavaScript数组包装在jQuery中，并使用map（）将其转换为jQuery（DOM节点列表）。 这是官方支持的。

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

这将创造

 
 
plop
 
onk
 
gloubi
  

我经常使用这种技术以避免重复自己（DRY）。

Answer 4

您可以使用带有Jquery 追加function的常规循环。

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