使用属性或特性创建HTML选择选项

Question

我希望能够使用Javascript（而不是jQuery）以编程方式创建HTML select option。通过以下设置属性的方式创建它有什么优点：

var option = document.createElement('option');
option.setAttribute('text', 'option1');
option.setAttribute('value', 5);
option.setAttribute("selected", true);

与设置属性相反：

var option = document.createElement('option');
option.text = 'option1';
option.value = 5;
option.selected = true;

我更倾向于使用属性来创建选项，但只是想确保这不会引起任何问题，因为我在网上找到的许多示例都倾向于使用前一种方法（即设置属性）。

我更喜欢使用属性来创建选项，但只是想确保这样做不会导致任何问题。许多我在网上找到的示例都倾向于使用前一种方法，即设置属性。

- aw1975

---

可能是 https://dev59.com/32025IYBdhLWcg3wcli- 的重复问题。 - Buzinas

Answer 1

setAttribute 应该用于 DOM 元素，并且在 HTML 元素上将属性名称转换为小写。您不能使用点表示法为动态属性名称分配值。

使用 setAttribute() 修改某些属性（尤其是 XUL 中的 value 属性）的工作方式不一致，因为该属性指定默认值。要访问或修改当前值，应使用属性。例如，使用 elt.value 而不是 elt.setAttribute('value', val)。

因此，如果您有动态属性名称，请使用 setAttribute。如果您有普通属性，请使用 点表示法。

- Richard Hamilton

Answer 2

setAttribute 会在属性不存在时添加（创建）该属性并设置其值，而简写函数仅在属性与 DOM 对象兼容时才起作用。我认为它们中没有一个是“更好”使用的，只是为了方便而经常使用属性的简写。

我认为这完全取决于用户的偏好和您想要设置哪些属性。

- Bas van Stein

Answer 3

需要注意的是，在使用option.setAttribute（'text'，'foo'）;时，与其设置 innerHTML不同，它将创建一个名为文本的新属性（例如< option text ='foo'>）。

当设置未记录的属性时， obj.setAttribute（）函数很有用，但在这种情况下最好使用 option.text ='foo'; 。

- Tom Poole