什么是使用jQuery创buildHTML元素的最有效方法？
最近我一直在做很多模式窗口popup窗口，而不是，我用jQuery。 我用来在页面上创build新元素的方法绝大多数是沿着以下方向：
$("<div></div>"); 但是，我感觉这不是最好的或最有效的方法。 从性能的angular度来看，在jQuery中创build元素的最好方法是什么？
这个答案有以下build议的基准。
我使用$(document.createElement('div')); 基准testing显示这种技术是最快的。 我猜测这是因为jQuery不必将其识别为一个元素，并创build该元素本身。
你应该用不同的Javascript引擎来运行基准testing，并将结果与观众进行权衡。 从那里做决定。
我个人build议（为了可读性）：
$('<div>');
目前为止的一些build议（safari 3.2.1 / mac os x）：
var it = 50000; var start = new Date().getTime(); for (i = 0; i < it; ++i) { // test creation of an element // see below statements } var end = new Date().getTime(); alert( end - start ); var e = $( document.createElement('div') ); // ~300ms var e = $('<div>'); // ~3100ms var e = $('<div></div>'); // ~3200ms var e = $('<div/>'); // ~3500ms
题：
什么是使用jQuery创buildHTML元素的最有效方法？
回答：
既然是关于jQuery那么我认为最好使用这个（干净的）方法（你正在使用）
$('<div/>', { 'id':'myDiv', 'class':'myClass', 'text':'Text Only', }).on('click', function(){ alert(this.id); // myDiv }).appendTo('body');
DEMO。
这样，你甚至可以使用特定元素的事件处理程序
$('<div/>', { 'id':'myDiv', 'class':'myClass', 'style':'cursor:pointer;font-weight:bold;', 'html':'<span>For HTML</span>', 'click':function(){ alert(this.id) }, 'mouseenter':function(){ $(this).css('color', 'red'); }, 'mouseleave':function(){ $(this).css('color', 'black'); } }).appendTo('body');
DEMO。
但是当你处理大量的dynamic元素时，你应该避免在特定元素中添加事件handlers ，而应该使用委托事件处理程序
$(document).on('click', '.myClass', function(){ alert(this.innerHTML); }); var i=1; for(;i<=200;i++){ $('<div/>', { 'class':'myClass', 'html':'<span>Element'+i+'</span>' }).appendTo('body'); }
DEMO。
因此，如果您创build并追加数百个具有相同类的元素（例如（ myClass ）），那么事件处理将消耗更less的内存，因为只有一个处理程序将在那里为所有dynamic插入的元素执行作业。
更新：因为我们可以使用下面的方法来创build一个dynamic元素
$('<input/>', { 'type': 'Text', 'value':'Some Text', 'size': '30' }).appendTo("body");
但是使用jQuery-1.8.0或更高版本的方法不能设置size属性，这里是一个旧的bug报告 ，使用jQuery-1.7.2来看这个例子 ，使用上面的例子显示size属性被设置为30但使用相同的方法，我们不能使用jQuery-1.8.3来设置size属性，这里是一个不工作的小提琴 。 所以，要设置size属性，我们可以使用以下方法
$('<input/>', { 'type': 'Text', 'value':'Some Text', attr: { size: "30" } }).appendTo("body");
或者这个
$('<input/>', { 'type': 'Text', 'value':'Some Text', prop: { size: "30" } }).appendTo("body");
我们可以传递attr/prop作为子对象，但它在jQuery-1.8.0 and later版本中工作，请检查此示例，但在jQuery-1.7.2 or earlier （在所有早期版本中未testing） 将不起作用 。
顺便说一句，取自jQuery bug报告
有几个解决scheme。 首先是完全不使用它，因为它不会节省任何空间，这样可以提高代码的清晰度：
他们build议采用以下方法（在1.6.4进行testing）
$('<input/>') .attr( { type:'text', size:50, autofocus:1 } ) .val("Some text").appendTo("body");
所以，最好使用这种方法，海事组织。 这个更新是在我读/find这个答案后做出的，在这个答案中，如果你使用'Size'(capital S)而不是'size'那么它就可以正常工作 ，即使在version-2.0.2
$('<input>', { 'type' : 'text', 'Size' : '50', // size won't work 'autofocus' : 'true' }).appendTo('body');
另外阅读有关道具 ，因为有一个区别， Attributes vs. Properties ，它不同的版本。
其实，如果你在做$('<div>') ，jQuery也会使用document.createElement() 。
（只要看117行 ）。
有一些函数调用的开销，但除非性能是至关重要的（你正在创build数百（数千）的元素），没有太多的理由恢复到普通的DOM 。
只是为一个新的网页创build元素可能是你最好坚持jQuery的做法。
如果你有很多HTML内容（不仅仅是一个div），你可以考虑在隐藏的容器中将HTML构build到页面中，然后进行更新并在需要时使其可见。 通过这种方式，浏览器可以预先分析大部分标记，避免被JavaScript调用时陷入困境。 希望这可以帮助！
这不是问题的正确答案，但我仍然想分享这个…
只要使用document.createElement('div')并跳过JQuery，就可以大大提高性能，当你想要dynamic创build大量元素并追加到DOM时。
我认为你正在使用最好的方法，尽pipe你可以优化它：
$("<div/>");
从CPU的angular度来看，您不需要经常执行的操作就不需要原始性能。
你必须明白，元素创build性能的重要性在首先使用jQuery的情况下是无关紧要的。
请记住，创build元素没有真正的目的，除非你真的要使用它。
你可能会试图像$(document.createElement('div'))和$('<div>')这样的性能testing，并使用$(document.createElement('div'))获得很好的性能收益，但这是只是一个不在DOM中的元素。
然而，在一天结束的时候，你会想要使用这个元素，所以真正的testing应该包括f.ex。 .appendTo（）;
让我们来看看，如果你对对方进行以下testing：
var e = $(document.createElement('div')).appendTo('#target'); var e = $('<div>').appendTo('#target'); var e = $('<div></div>').appendTo('#target'); var e = $('<div/>').appendTo('#target');
你会注意到结果会有所不同。 有时候一种方式比另一种更好。 这只是因为计算机上后台任务的数量随时间而改变。
在这里testing自己
所以，在一天结束的时候，你会select创build一个元素的最小和最可读的方式。 这样，至less，你的脚本文件将尽可能小。 在DOM中使用它之前，可能比性能点更重要的因素是创build元素的方式。
有人已经做了一个基准： jQuery document.createElement等价吗？
$(document.createElement('div'))是最大的赢家。
有一点是可能更容易做到：
$("<div class=foo id=bar style='color:white;bgcolor:blue;font-size:12pt'></div>")
然后用jquery调用所有这些。
我正在使用jquery.min v2.0.3。 这对我来说更好使用以下内容：
var select = jQuery("#selecter"); jQuery("`<option/>`",{value: someValue, text: someText}).appendTo(select);
如下所示：
var select = jQuery("#selecter"); jQuery(document.createElement('option')).prop({value: someValue, text: someText}).appendTo(select);
第一个代码的处理时间远远低于第二个代码。
假设我们有场景来dynamicreplace一些html标签来格式化，我们不能使用$('#id').text(); 因为它不会接受html格式的文本 ，为了完成这些工作，我们需要使用jQuery append方法，而不是每次我们需要更新和使用append方法时.text()方法的替代方法。
var fileImportStatus; $('#id').change(function() { if ($('#id').is(':checked')) { fileImportStatus = "<strong>ON</strong>"; } else { fileImportStatus = "<strong>OFF</strong>"; } }); $('#saveBtn').click(function() { $('#fileImportStatusTxt').empty(); $('#fileImportStatusTxt').append('File Import is ' + fileImportStatus); });
