javascript - jquery append 和 appendTo

Question

我只想知道这两种方法之间是否有任何区别（尤其是在性能方面）：

1)

$('.container').append('<div class="divChild">test div</div>'); 
$('.container .divChild').click(function() { alert('test'); });

2)

var $childDiv = $('<div class="divChild">test div</div>');
$childDiv.appendTo($('.container')).click(function() { alert('test'); });

所以基本上第二种方法似乎要快得多，因为我真的不必搜索 divChild div 两次，但我需要向 div 添加点击事件。是这样吗？

score 2 · Accepted Answer

这里要说明的第一点是：除非您经常这样做（在很短的时间内数千次），否则这不太重要。

但我怀疑最有效的做法是记住结果$('.container')然后使用children它：

var c = $('.container');
c.append('<div class="divChild">test div</div>'); 
c.children('.divChild').click(function() { alert('test'); });

或者实际上，从技术上讲，您不需要变量：

$('.container')
    .append('<div class="divChild">test div</div>')
    .children('.divChild')
      .click(function() { alert('test'); });

但我发现像这样的长链难以阅读、难以维护和调试。

score 2 · Accepted Answer

另一种选择是：

$('<div/>', {
    'class': 'divChild',
    'text': 'test div',
    'click': function(){
       alert('test');
    }
}).appendTo('.container');

2 回答 2