可以说我有一个空的div:
<div id='myDiv'></div>
这是:
$('#myDiv').html("<div id='mySecondDiv'></div>");
与:
var mySecondDiv=$("<div id='mySecondDiv'></div>"); $('#myDiv').append(mySecondDiv);
每当您将HTML字符串传递给jQuery的任何方法时,都会发生以下情况:
创建了一个临时元素,我们称它为x。x innerHTML设置为您传递的HTML字符串。然后,jQuery将把每个产生的节点(即x childNodes)转移到新创建的文档片段中,然后将其缓存下一次。然后,它将片段的片段childNodes作为新的DOM集合返回。
innerHTML
childNodes
请注意,它实际上要比这复杂得多,因为jQuery进行了大量的跨浏览器检查和各种其他优化。例如,如果您仅将传递<div></div>给jQuery(),则jQuery将采用快捷方式并简单地执行document.createElement('div')。
<div></div>
jQuery()
document.createElement('div')
innerHTML是 一般 的快的方法,虽然不要让支配你做什么,所有的时间。jQuery的方法并不element.innerHTML = ...像我所提到的那么简单-正如我提到的,正在发生大量检查和优化。
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 });