jquery .html（）与.append（）
可以说我有一个空的div：
<div id='myDiv'></div> 这是：
$('#myDiv').html("<div id='mySecondDiv'></div>");
同样的：
var mySecondDiv=$('<div></div>'); $('#myDiv').append(mySecondDiv);
每当你将一串HTML传递给任何jQuery的方法，就会发生下面的情况：
一个临时元素被创build，我们称之为x。 x的innerHTML被设置为你传递过来的HTMLstring。 然后，jQuery将把每个生成的节点（即，x的childNodes ）转移到新创build的文档片段中，然后将其下次caching。 然后它将返回片段的childNodes作为一个新的DOM集合。
请注意，它实际上比这更复杂，因为jQuery执行了一系列跨浏览器检查和其他各种优化。 例如，如果只传递<div></div>到jQuery() ，jQuery将采用快捷方式，并简单地执行document.createElement('div') 。
编辑 ：要查看jQuery执行的检查的绝对数量，看看这里 ， 在这里和这里 。
innerHTML 通常是更快的方法，尽pipe不要总是pipe理你所做的事情。 jQuery的方法不像element.innerHTML = ...那么简单 – 正如我所提到的，有一些检查和优化发生。
正确的技术在很大程度上取决于情况。 如果你想创build大量相同的元素，那么你想要做的最后一件事是创build一个巨大的循环，在每次迭代中创build一个新的jQuery对象。 例如用jQuery创build100个div的最快方法：
jQuery(Array(101).join('<div></div>'));
还要考虑到可读性和维护的问题。
这个：
$('<div id="' + someID + '" class="foobar">' + content + '</div>');
…比这更难维护：
$('<div/>', { id: someID, className: 'foobar', html: content });
他们不一样。 第一个replace HTML而不创build另一个jQuery对象。 第二个为第二个div创build一个额外的jQuery包装器，然后将其附加到第一个div。
一个jQuery包装 （每个例子）：
$("#myDiv").html('<div id="mySecondDiv"></div>'); $("#myDiv").append('<div id="mySecondDiv"></div>');
两个jQuery包装器 （每个示例）：
var mySecondDiv=$('<div id="mySecondDiv"></div>'); $('#myDiv').html(mySecondDiv); var mySecondDiv=$('<div id="mySecondDiv"></div>'); $('#myDiv').append(mySecondDiv);
你有几个不同的用例正在进行。 如果你想replace内容， .html是一个很好的调用，因为它相当于innerHTML = "..." 。 但是，如果你只是想追加内容，额外的$()包装器是不需要的。
如果您以后需要操作添加的div请仅使用两个包装器。 即使在这种情况下，你仍然可能只需要使用一个：
var mySecondDiv = $("<div id='mySecondDiv'></div>").appendTo("#myDiv"); // other code here mySecondDiv.hide();
如果用.add表示.append ，那么如果#myDiv为空，结果是一样的。
性能是否一样？ 不知道。
.html(x)最后做同样的事情.empty().append(x)
那么.html（）使用比DOM创build更快的.innerHTML。
您可以通过以下方法获得第二种方法来实现相同的效果：
var mySecondDiv = $('<div></div>'); $(mySecondDiv).find('div').attr('id', 'mySecondDiv'); $('#myDiv').append(mySecondDiv);
Luca提到html()只是插入了HTML，导致了更快的性能。
但在某些情况下，您会select第二个选项，请考虑：
// Clumsy string concat, error prone $('#myDiv').html("<div style='width:'" + myWidth + "'px'>Lorem ipsum</div>"); // Isn't this a lot cleaner? (though longer) var newDiv = $('<div></div>'); $(newDiv).find('div').css('width', myWidth); $('#myDiv').append(newDiv);
除了给出的答案，如果你有这样的事情：
<div id="test"> <input type="file" name="file0" onchange="changed()"> </div> <script type="text/javascript"> var isAllowed = true; function changed() { if (isAllowed) { var tmpHTML = $('#test').html(); tmpHTML += "<input type=\"file\" name=\"file1\" onchange=\"changed()\">"; $('#test').html(tmpHTML); isAllowed = false; } } </script>
这意味着如果上传任何文件，您想要自动添加一个file upload，则上述代码将不起作用，因为file upload后，第一个file upload元素将被重新创build，因此上传的文件将从其中被删除。 你应该使用.append（）来代替：
function changed() { if (isAllowed) { var tmpHTML = "<input type=\"file\" name=\"file1\" onchange=\"changed()\">"; $('#test').append(tmpHTML); isAllowed = false; } }
