假设我有一个空的div:

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

是这样的:

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

同为:

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

当前回答

.html()将替换所有内容。

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

其他回答

如果你的.add是指.append,那么如果#myDiv是空的,结果也是一样的。

表演一样吗?不知道。

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

这种事就发生在我身上。Jquery版本:3.3。 如果你正在遍历一个对象列表,并且想要将每个对象添加为某个父dom元素的子元素,那么.html和.append将表现得非常不同。.html将最终只添加到父元素的最后一个对象,而.append将添加所有列表对象作为父元素的子元素。

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

嗯,.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();