Question

我有一个div，我使用jQuery append或html追加另一个div。

我搜索了使用jQuery追加元素。

哪个更好？

使用这样的字符串追加：

$('#div_main').append('<div id="div_sub" onclick="func(param);"></div>')

或：

$('#div_main').append($('<div id="div_sub"></div>').click(function(){ func(param) }))

我试过第一个哪个更快但性能更好？

请注意循环中的append。

Answer 1

都不是。您不应该为动态添加/删除的元素重新绑定事件。相反，您应该将事件委托给最近的稳定父母：

$('#div_main').on('click', '.sub', function () {
   ...do stuff...
});

$(...).on('click', function () {
    $('#div_main').append('<div class="sub"></div>');
});

Answer 2

jsperf.com是测试这类事情的好方法。使用DOM明显优于任何一个jQuery代码示例（它们执行大致相同）。看看：http://jsperf.com/clickers

var main = document.getElementById('div_main'),
    clicker = document.createElement('div');

clicker.onclick = function() { func(param) };
main.appendChild(clicker);

具有追加div的性能点击事件

2 个答案: