jquery .html（）vs .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')。

编辑：要查看jQuery执行的大量检查，请查看此处，此处和此处。

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

});

Answer 2

她们不一样。第一个替换 HTML而不首先创建另一个jQuery对象。第二个为第二个div创建一个额外的jQuery包装器，然后将它附加到第一个div 。

一个jQuery Wrapper（每个例子）：

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

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

两个jQuery Wrappers（每个例子）：

var mySecondDiv=$('<div id="mySecondDiv"></div>');

$('#myDiv').html(mySecondDiv);

var mySecondDiv=$('<div id="mySecondDiv"></div>');

$('#myDiv').append(mySecondDiv);

你有几个不同的用例。如果你想要替换内容，那.html是一个很棒的电话，因为它相当于innerHTML = "..."。但是，如果您只想附加内容，$()则不需要额外的包装器。

如果您需要div稍后操作添加的，请仅使用两个包装器。即使在这种情况下，您仍然可能只需要使用一个：

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

// other code here

mySecondDiv.hide();