jQuery .html（）与.append（）

Question

可以说我有一个空的div：

<div id='myDiv'></div>

这是：

$('#myDiv').html("<div id='mySecondDiv'></div>");

与：

var mySecondDiv=$("<div id='mySecondDiv'></div>");
$('#myDiv').append(mySecondDiv);

Answer 1

每当您将HTML字符串传递给jQuery的任何方法时，都会发生以下情况：

创建了一个临时元素，我们称它为x。x innerHTML设置为您传递的HTML字符串。然后，jQuery将把每个产生的节点（即x
childNodes）转移到新创建的文档片段中，然后将其缓存下一次。然后，它将片段的片段childNodes作为新的DOM集合返回。

请注意，它实际上要比这复杂得多，因为jQuery进行了大量的跨浏览器检查和各种其他优化。例如，如果您仅将传递<div></div>给jQuery()，则jQuery将采用快捷方式并简单地执行document.createElement('div')。

innerHTML是 一般 的快的方法，虽然不要让支配你做什么，所有的时间。jQuery的方法并不element.innerHTML = ...像我所提到的那么简单-正如我提到的，正在发生大量检查和优化。

正确的技术在很大程度上取决于情况。如果要创建大量相同的元素，那么最后要做的就是创建一个巨大的循环，在每次迭代中创建一个新的jQuery对象。例如，使用jQuery创建100个div的最快方法：

jQuery(Array(101).join('<div></div>'));

还有一些可读性和维护性问题要考虑在内。

这个：

$('<div id="' + someID + '" class="foobar">' + content + '</div>');

......是 很多 难以维持比这个：

$('<div/>', {
    id: someID,
    className: 'foobar',
    html: content
});