Javascript 使用jQuery创建HTML元素最有效的方法是什么？

最近，我做了很多模态窗口弹出窗口，我使用了jQuery。我用来在页面上创建新元素的方法主要是：

$("<div></div>");

$（“”）；

然而，我觉得这不是最好或最有效的方法。从性能角度来看，在jQuery中创建元素的最佳方法是什么

---

具有以下建议的基准。

我认为您使用的是最佳方法，尽管您可以将其优化为：

 $("<div/>");

$（“”）；

我个人建议（为了可读性）：

<代码>$（''）； 目前建议的一些数字（safari 3.2.1/mac os x）：

var it=50000；
var start=new Date（）.getTime（）；
对于（i=0；i

我使用

$（document.createElement（'div'）此技术是最快的。我推测这是因为jQuery不必将其标识为元素并创建元素本身

您应该使用不同的Javascript引擎运行基准测试，并用结果衡量您的受众。从这里做出决定。
 你不需要从一个操作中得到原始的性能，从CPU的角度来看，你将非常不经常执行。
 如果你有很多HTML内容（不仅仅是单个div），你可以考虑在隐藏的容器中把HTML构建到页面中，然后更新它，并在需要时使其可见。这样，浏览器就可以预解析大部分标记，避免调用JavaScript时陷入困境。希望这有帮助
 这不是问题的正确答案，但我还是想与大家分享一下

当您想动态生成大量元素并附加到DOM中时，只使用
document.createElement（'div'）
和跳过JQuery将大大提高性能。
实际上，如果您正在执行
$（“”）
，JQuery也将使用
document.createElement（）

（看一看）

有一些函数调用开销，但除非性能至关重要（您要创建成百上千个元素），否则没有太多理由恢复到普通的DOM

仅为新网页创建元素可能是一种情况，在这种情况下，您最好坚持使用jQuery的方法。
一点是，这样做可能更容易：

$("<div class=foo id=bar style='color:white;bgcolor:blue;font-size:12pt'></div>")

$（“”）

然后用jquery调用完成所有这些。
有人已经做了一个基准测试：

$（document.createElement（'div'））
是最大的赢家。
您必须理解，元素创建性能的重要性与首先使用jQuery的上下文无关

请记住，创建元素并没有真正的目的，除非您真的要使用它

您可能会尝试对
$（document.createElement（'div'））
与
$（''）
进行性能测试，并通过使用
$（document.createElement（'div'））
获得巨大的性能收益，但这只是一个尚不在DOM中的元素

然而，归根结底，您还是希望使用该元素，因此真正的测试应该包括f.ex。appendTo（）

让我们看看，如果你测试以下内容：

var e = $(document.createElement('div')).appendTo('#target');
var e = $('<div>').appendTo('#target');
var e = $('<div></div>').appendTo('#target');
var e = $('<div/>').appendTo('#target');

var e=$（document.createElement（'div'））.appendTo（'#target'）；
变量e=$（''）.appendTo（'#target'）；
变量e=$（''）.appendTo（'#target'）；
变量e=$（''）.appendTo（'#target'）；

你会注意到结果会有所不同。有时一种方法比另一种更好。这仅仅是因为计算机上的后台任务量随着时间的推移而变化


因此，在一天结束时，您确实希望选择创建元素的最小和最可读的方式。这样，至少您的脚本文件将尽可能小。与在DOM中使用元素之前创建元素的方式相比，性能方面的一个重要因素可能更重要。
问题：
使用jQuery创建HTML元素最有效的方法是什么

答复:
因为它是关于
jQuery
的，所以我认为最好使用这种（干净的）方法（您正在使用）


因此，如果您使用相同的类创建并附加数百个元素，即（
myClass
），那么事件处理将消耗更少的内存，因为只有一个处理程序可以处理所有动态插入的元素

更新：因为我们可以使用以下方法创建动态元素

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    'size': '30'
}).appendTo("body");

还是这个

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    prop: { size: "30" }
}).appendTo("body");

因此，IMO最好使用这种方法。这个更新是在我阅读/发现之后进行的，在这个答案中显示，如果您使用
'Size'（大写字母S）
而不是
'Size'
，那么即使是在
版本-2.0.2中，它也只会

$('<input>', {
    'type' : 'text',
    'Size' : '50', // size won't work
    'autofocus' : 'true'
}).appendTo('body');

$（“”{
“类型”：“文本”，
'Size'：'50'，//大小不起作用
“自动对焦”：“真”
}).附于（“主体”）；

另外，请阅读相关内容，因为属性与属性之间存在差异，所以不同版本的属性有所不同。
我使用的是jquery.min v2.0.3。
对我来说，最好使用以下选项：

var select = jQuery("#selecter");
jQuery("`<option/>`",{value: someValue, text: someText}).appendTo(select);

第一个代码的处理时间远低于第二个代码。
来自jquery文档：“创建单个元素时，使用结束标记或XHTML格式。例如，要创建跨距，请使用$（“”）或$（“”）而不是不使用结束斜杠/标记。@Owen，这种行为是一个bug，而不是一个功能。垃圾进来，垃圾出去——碰巧你得到的垃圾是
$(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');
}

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    'size': '30'
}).appendTo("body");

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    attr: { size: "30" }
}).appendTo("body");

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    prop: { size: "30" }
}).appendTo("body");

$('<input/>')
.attr( { type:'text', size:50, autofocus:1 } )
.val("Some text").appendTo("body");

$('<input>', {
    'type' : 'text',
    'Size' : '50', // size won't work
    'autofocus' : 'true'
}).appendTo('body');

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