假设我有一个空的div:
<div id='myDiv'></div>
是这样的:
$('#myDiv').html("<div id='mySecondDiv'></div>");
同为:
var mySecondDiv=$("<div id='mySecondDiv'></div>");
$('#myDiv').append(mySecondDiv);
假设我有一个空的div:
<div id='myDiv'></div>
是这样的:
$('#myDiv').html("<div id='mySecondDiv'></div>");
同为:
var mySecondDiv=$("<div id='mySecondDiv'></div>");
$('#myDiv').append(mySecondDiv);
当前回答
这种事就发生在我身上。Jquery版本:3.3。 如果你正在遍历一个对象列表,并且想要将每个对象添加为某个父dom元素的子元素,那么.html和.append将表现得非常不同。.html将最终只添加到父元素的最后一个对象,而.append将添加所有列表对象作为父元素的子元素。
其他回答
如果你的.add是指.append,那么如果#myDiv是空的,结果也是一样的。
表演一样吗?不知道。
.html(x)最终会做与.empty().append(x)相同的事情
这种事就发生在我身上。Jquery版本:3.3。 如果你正在遍历一个对象列表,并且想要将每个对象添加为某个父dom元素的子元素,那么.html和.append将表现得非常不同。.html将最终只添加到父元素的最后一个对象,而.append将添加所有列表对象作为父元素的子元素。
嗯,.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);