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中添加click事件。是这样吗？

Answer 1

要做的第一点是：除非你这样做很多（在很短的时间内成千上万次），否则不太重要

但我怀疑最有效的方法是记住$('.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'); });

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

Answer 2

另一种选择是：

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