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

题:

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

回答:

因为jQuery那时我认为最好使用这种(干净的)方法(你正在使用)

$('
', {
    'id':'myDiv',
    'class':'myClass',
    'text':'Text Only',
}).on('click', function(){
    alert(this.id); // myDiv
}).appendTo('body');

DEMO.

这样,您甚至可以为特定元素使用事件处理程序

$('
', {
    'id':'myDiv',
    'class':'myClass',
    'style':'cursor:pointer;font-weight:bold;',
    'html':'For HTML',
    'click':function(){ alert(this.id) },
    'mouseenter':function(){ $(this).css('color', 'red'); },
    'mouseleave':function(){ $(this).css('color', 'black'); }
}).appendTo('body');

DEMO.

但是当你处理大量的动态元素时,你应该避免handlers在特定的元素中添加事件,相反,你应该使用委托的事件处理程序,比如

$(document).on('click', '.myClass', function(){
    alert(this.innerHTML);
});

var i=1;
for(;i<=200;i++){
    $('
', {
        'class':'myClass',
        'html':'Element'+i+''
    }).appendTo('body');
}

DEMO.

因此,如果您创建并附加数百个具有相同类的元素,即(myClass),那么事件处理将消耗更少的内存,因为只有一个处理程序可用于为所有动态插入的元素执行任务.

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

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

但是size使用这种方法jQuery-1.8.0或者稍后使用这种方法无法设置属性,这里是一个旧的bug报告,请看这个示例使用jQuery-1.7.2哪个显示size属性设置为30使用上面的示例但是使用相同的方法我们无法设置size属性使用jQuery-1.8.3,这里是一个不工作的小提琴.因此,要设置size属性,我们可以使用以下方法

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

或者这个

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

我们可以通过attr/prop为子对象,但它的工作原理jQuery-1.8.0 and later版本检查这个例子,但它是行不通的jQuery-1.7.2 or earlier(在所有早期版本未测试).

BTW,取自jQuerybug报告

有几种解决方案.第一种是根本不使用它,因为它不会为您节省任何空间,这提高了代码的清晰度:

他们建议使用以下方法(也适用于早期的方法,经过测试1.6.4)

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

所以,最好使用这种方法,IMO.这个更新是在我阅读/找到这个答案之后做出的,在这个答案中表明,如果你使用'Size'(capital S)而不是'size'那么它将会正常工作,即使在version-2.0.2

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

另外阅读关于道具,因为有区别Attributes vs. Properties,它因版本而异.

实际上,如果你正在做$('