jQuery .html() vs .append()

如果.add指的是.append，则如果#myDiv为空，则结果相同。

表演一样吗?不知道。

.html(x)最终做的事情与.empty().append(x)相同

嗯，.html()使用.innerHTML，这比DOM创建快。

它们不一样。第一个替换 HTML没有创建另一个jQuery对象。第二个为第二个div创建一个额外的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);

您有几个不同的用例。如果你想替换内容，.html是一个很好的调用，因为它相当于innerHTML = "..."。然而，如果你只是想追加内容，额外的$()包装器集是不需要的。

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

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

你可以用第二种方法来达到同样的效果:

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

Luca提到html()只是插入HTML，从而导致更快的性能。

在某些情况下，你会选择第二种方法，考虑:

// 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);

当你传递一个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
});

除了给出的答案，在这种情况下，你有这样的东西:

<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>

这意味着如果上传了任何文件，您想要自动添加一个文件上传，上述代码将不起作用，因为在文件上传后，第一个文件上传元素将被重新创建，因此上传的文件将从其中删除。你应该使用.append()来代替:

    function changed()
{
if (isAllowed)
{
var tmpHTML = "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
$('#test').append(tmpHTML);
isAllowed = false;
}
}

.html()将取代一切。

.append()只会在结尾追加。