一尘不染

jQuery .html()与.append()

html

可以说我有一个空的div:

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

这是:

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

与:

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

阅读 365

收藏
2020-05-10

共1个答案

一尘不染

每当您将HTML字符串传递给jQuery的任何方法时,都会发生以下情况:

创建了一个临时元素,我们称它为x。x innerHTML设置为您传递的HTML字符串。然后,jQuery将把每个产生的节点(即x
childNodes)转移到新创建的文档片段中,然后将其缓存下一次。然后,它将片段的片段childNodes作为新的DOM集合返回。

请注意,它实际上要比这复杂得多,因为jQuery进行了大量的跨浏览器检查和各种其他优化。例如,如果您仅将传递<div></div>jQuery(),则jQuery将采用快捷方式并简单地执行document.createElement('div')


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
});
2020-05-10