对于选择的DOM对象,add()和appendChild()是否相同？

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

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

add( )是通过HTMLSelectElement接口专门提供的，专门用于向元素添加选项select，并且有一些额外的选项（例如添加 new 的可选索引option等）。

appendChild( )将为您提供子节点的直接附加。

注意两种方法跨浏览器的不同实现：我认为这将是您最大的痛点。IIRC，IE 在将子项附加到selects 时会导致问题，因此您可能希望add该方法是否存在并依靠appendChild.

Answer 2

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

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