最近我一直在做很多模态窗口弹出窗口，我使用了jQuery。我用来在页面上创建新元素的方法绝大多数都遵循以下原则：
$("<div></div>");
但是，我感觉这不是最好或最有效的方法。从性能角度来看，在 jQuery 中创建元素的最佳方法是什么？
该答案具有以下建议的基准。
使用 jQuery 创建 HTML 元素的最有效方法是什么？
IT技术
javascript
jquery
html
dom
2021-01-19 03:54:08
6个回答
我使用$(document.createElement('div')); 基准测试表明这种技术是最快的。我推测这是因为 jQuery 不必将其标识为元素并自行创建元素。
您应该真正使用不同的 Javascript 引擎运行基准测试，并根据结果权衡您的受众。从那里做出决定。
我个人建议（为了可读性）：
$('<div>');
到目前为止建议的一些数字（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 创建 HTML 元素的最有效方法是什么？
回答：
既然差不多了，jQuery我认为最好使用这种（干净的）方法（您正在使用）
$('<div/>', {
'id':'myDiv',
'class':'myClass',
'text':'Text Only',
}).on('click', function(){
alert(this.id); // myDiv
}).appendTo('body');
这样，您甚至可以为特定元素使用事件处理程序，例如
$('<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');
但是当你处理大量动态元素时，你应该避免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');
}
因此，如果您创建并附加数百个具有相同类的元素，即 ( myClass) 那么事件处理将消耗更少的内存，因为只有一个处理程序将在那里为所有动态插入的元素执行工作。
更新：由于我们可以使用以下方法来创建动态元素
$('<input/>', {
'type': 'Text',
'value':'Some Text',
'size': '30'
}).appendTo("body");
但是size不能使用这种方法 usingjQuery-1.8.0或 later设置属性，这是一个旧的错误报告，查看此示例usingjQuery-1.7.2显示size属性设置为30using 上面的示例，但使用相同的方法我们无法设置size属性 using jQuery-1.8.3，这里是一个不工作的小提琴。因此，要设置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（未在所有早期版本中测试）。
顺便说一句，取自jQuery错误报告
有几种解决方案。首先是根本不使用它，因为它不会为您节省任何空间，这会提高代码的清晰度：
他们建议使用以下方法（也适用于较早的方法，已在 中测试1.6.4）
$('<input/>')
.attr( { type:'text', size:50, autofocus:1 } )
.val("Some text").appendTo("body");
因此，最好使用这种方法，IMO。此更新是在我阅读/找到此答案后进行的，并且在此答案中显示，如果您使用'Size'(capital S)而不是'size'then 它将正常工作，即使在version-2.0.2
$('<input>', {
'type' : 'text',
'Size' : '50', // size won't work
'autofocus' : 'true'
}).appendTo('body');
另请阅读prop，因为存在差异Attributes vs. Properties，它因版本而异。
实际上，如果你在做$('<div>')，jQuery 也会使用document.createElement().
（看看第 117 行）。
有一些函数调用开销，但除非性能至关重要（您正在创建数百 [数千] 个元素），没有太多理由恢复到普通DOM。
只是为新网页创建元素可能是您最好坚持使用jQuery做事方式的情况。
如果您有很多 HTML 内容（不仅仅是单个 div），您可能会考虑将 HTML 构建到隐藏容器内的页面中，然后更新它并在需要时使其可见。这样，您的大部分标记可以由浏览器预先解析，并避免在调用时陷入 JavaScript 的困境。希望这可以帮助！