Question

假设我需要<div class="statistics"></div>我需要放在一个HTML页面中的5个不同位置。 statistics div有一个6行长列表。

我的问题是这个......

使用起来更快：

<div class="statistics"></div>

然后像这样使用jquery：

$( ".statistics" ).append( $(<ul><li>content</li><li>content</li><li>content</li><li>content</li><li>content</li><li>content</li></ul>'));

...而不是复制/粘贴这5个不同地方的代码？

Answer 1

如果内容总是相同，或者当它更新时，它将需要在所有五个地方更新相同，然后通过jQuery附加div将是一个更快的选项并提供一个可维护的的地方。

虽然您可能希望将脚本更改为

$(".statistics").each(function(){
   $(this).append("<ul> ... </ul>");
});

为了追加每个div。有更好的替代方法，例如使用模板引擎甚至php来包含一个HTML文件，其中包含六行。

Answer 2

如果您希望使用jQuery更快更有效，我们可以将它与原生js一起使用

$('.statistics').each(function(i) {
    var newDOM = document.createElement('ul');
    newDOM.innerHTML = '<li>content</li><li>content</li><li>content</li><li>content</li><li>content</li><li>content</li>';

    this[i].appendChild(newDOM);
});

添加html比粘贴多次更快吗？

2 个答案: