Question

我正在开发一个小型Web应用程序，用于更改选择下拉列表的内容。

我想知道appendChild（）和add（）是否在JavaScript中的select DOM对象上完成相同的任务？


var someSelect = document.getElementById('select-list');
var newOption = document.createElement('option');
someSelect.appendChild(newOption);
// The above is the same as the following?
someSelect.add(newOption);

Answer 1

如果您想在<select>中操作选项时确保跨浏览器兼容性，最可靠的方法是使用其options属性并使用Option对象填充它。自20世纪90年代末以来，以下历史悠久的方法适用于所有可编写脚本的浏览器：

var options = select.options;
options[options.length] = new Option("Option text", "option_value");

Answer 2

在这种情况下，我相信他们会完成同样的任务。

add( )是专门通过HTMLSelectElement interface专门为select元素添加选项而提供的，并且有一些额外选项（例如添加新{{}的可选索引1}}等。）。

option将为您提供子节点的直接附加。

注意跨浏览器的两种方法的不同实现：我认为这将是你最大的痛点。 IIRC，在将儿童追加到appendChild( )时，IE会导致问题，因此如果该方法存在并且回到select，您可能希望add。

Answer 3

我认为它应该是等价的，但是在这里你可以找到一个问题，当你尝试使用选项组时，它会说明不同的实现：

SELECT box: On IE item is added to OptGroup instead of root. FF ok

当select元素中已存在组时，IE无法在“根目录”中添加新选项。

对于选择的DOM对象，add（）和appendChild（）是否相同？

3 个答案: