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

Answer 3

如果.add你的意思是.append,那么结果是相同的,如果#myDiv是空的.

性能是一样的吗？不知道.

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

Answer 4

好吧,.html()使用.innerHTML比DOM创建更快的用途.

Answer 5

.html() 将取代一切。

.append() 只会在最后追加。

Answer 6

您可以通过以下方式获得第二种方法来实现相同的效果:

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