jQuery创建元素 - 另一个.attr()vs .prop()问题

Question

可能重复:
.prop()vs .attr()

给定.prop()jQuery中的新方法,这是创建具有特定字段的新元素的首选方法,例如链接:

1. $('<a>').prop('href', '...');
2. $('<a>').attr('href', '...');
3. $('<a href="...">');

我总是倾向于使用#2,但是不清楚在DOM中放置的新元素现在是否应该使用#1.

Answer 1

attr()在那种情况下,我会选择.您正在创建一个新<a>元素并设置其href HTML属性,因此强调这一点是有意义的.

但是,由于href属性直接映射到hrefDOM属性,因此使用prop()具有完全相同的结果.

让我们再看一个例子,它与attr()和之间的差异更相关prop():假设您想要设置元素的class属性<a>而不是它的属性href.您问题中的示例代码变为:

1. $('<a>').prop('className', '...');
2. $('<a>').attr('class', '...');
3. $('<a class="...">');

恕我直言,(2)和(3)使一个人的意图比(1)更清楚.事实上class,由于该令牌可能是宿主语言中的保留字,因此无法命名DOM属性,这充其量只是一个实现细节.在classHTML属性通常是我们正在考虑在这方面.

当然,有些情况恰恰相反,例如使用"boolean"HTML属性时,checked或者disabled.在这种情况下,设置强类型DOM属性而不是创建定义较少的HTML属性会更加健壮.

Answer 2

我通常会像这样创建一个标签:

$('<a>', {href: '...'});

在开始时向元素添加尽可能多的属性.(是的attributes,不是属性)

所以你可以为输入这样的项目做同样的事情:

      $('<input>',{
                name: 'some_name',
                id: 'some_id',
                value: item_value,
                readonly: 'true',
                style: 'background: #eee;',
                size: 15
            });

或实际的div:

      $('<div>',{
                id: 'some_id',
                text: 'this will be inside the div'
            });

这是一个小提琴的例子:http://jsfiddle.net/maniator/mbjgd/

编辑
从我的评论如下:

这样做的原因是,当你创建项目时,你是通过设置它的属性来创建它的,稍后当这些属性被javascript之类的东西改变时,这些属性变得毫无意义,所以此时你必须使用对象的属性来获得您可能正在寻找的真正解决方案.