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

Posted 2023-05-09

【中文标题】我应该如何使用 jQuery 将多个相同的元素添加到 div

【英文标题】：How should I add multiple identical elements to a div with jQuery

【发布时间】：2010-09-17 02:56:51

【问题描述】：

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

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

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

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

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

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

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

【参考方案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 版本应该包含基于上面链接的研究的更改。

【讨论】：

谢谢你 - 我真的很希望能找到一些我可以链接的东西，但是 Resig 博客是一个很棒的发现！

有没有在 jQuery 中包含此功能的版本？

【参考方案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 片段，并且在所有浏览器中都非常高效。

【参考方案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）。

【讨论】：

您可以使用.get() 返回将由map 连接的整个数组，但您不能返回 jQuery，否则您将得到一个不实用的 jQuery jQuery。

【参考方案4】：

您可以在 Jquery append 函数中使用常规循环。

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

【讨论】：

是的......自从我回答这个问题以来的 10 年里，我可能已经找到了更好的方法，但请随时添加您自己的答案！