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

Question

可能是重复问题:
.prop() vs .attr()

考虑到jQuery中新的.prop()方法，哪种方法更适合使用特定字段创建一个新元素，例如链接：

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

我经常使用第2个选项，但不清楚将要放置在DOM中的新元素是否应该使用#1。

- Alnitak

---

这个链接的问题主要涉及属性和特性的getter。而这个问题则专门讨论setter，更具体地说是它们在新创建的DOM元素中的应用。该问题的答案只在链接页面上间接提到。 - Bob Stein

@BobStein-VisiBone 如果您有足够的声望，您可以投票重新开放，但我已经得到了我想要的答案（如下所示）。 - Alnitak

感谢@Alnitak，我也得到了答案。由于我的声望不足以重新打开问题（我想是3K），所以在此留下一个提示供后人参考。 - Bob Stein

Answer 1

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

然而，由于href属性直接映射到href DOM属性，使用prop()将具有完全相同的效果。

让我们再举一个例子，更相关于attr()和prop()之间的区别：假设你想设置<a>元素的class属性而不是href。在您的问题中，示例代码变为：

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

在我看来，(2)和(3)使人们的意图更清晰。在那种情况下，不能有名为class的DOM属性，因为该标记可能是主机语言中的保留字，至少是实现细节。在这种情况下，class HTML属性通常是我们所考虑的。

当然，也有相反的情况，例如在处理像checked或disabled这样的“布尔”HTML属性时。在这种情况下，设置强类型DOM属性会比创建不太明确定义的HTML属性更加健壮。

- Frédéric Hamidi

---

+1 对于详细的解释，而不是仅仅“因为我这么说”的回答。 - Chad

Answer 2

通常我会这样创建a标签：

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

在元素开始处添加尽可能多的属性。（是的，是属性，不是属性）

因此，您可以对输入框等项目执行相同的操作：

      $('<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'
            });

这是一个 jsfiddle 示例: http://jsfiddle.net/maniator/mbjgd/ 编辑： 根据我的下方评论： 原因在于，当您创建该项时，您是通过设置其属性来创建它的，稍后这些属性在被诸如 javascript 之类的东西更改时就变得无意义了，因此在那个时候，您必须使用对象的属性来获得您可能正在寻找的真正解决方案。

- Naftali

---

有趣的 - 我之前不知道那种语法。 - Alnitak

我经常使用它来定义许多对象，例如用作输入框，如下所示： $('<input>',{ name: item.name, id: item.id, value: item_value, readonly: 'true', style: 'background: #eee;', size: 15 }); - Naftali

@Alnitak，我编辑了我的帖子以便更好地向您展示。我还会添加一个fiddle。 - Naftali

谢谢，虽然我们仍然缺乏一个合理的理由来解释为什么在这种情况下使用属性而不是属性，当事实上现在大多数人似乎更倾向于建议后者。 - Alnitak

@Alnitak，这是因为当您创建该项时，您是通过设置其属性来创建它的，稍后当这些属性被类似JavaScript的某些东西更改时，它们变得毫无意义，因此在那时您必须使用对象的属性来获取您可能正在寻找的真正解决方案。 - Naftali

据我所知，这种方法的另一个优点是，您可以将保留字用作属性，例如class：'some-class'，type：'text'。至少对于.prop()，您需要使用className而不是class。 - Bob Stein