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

【问题标题】：Are add() and appendChild() the same for select DOM objects?选择 DOM 对象的 add() 和 appendChild() 是否相同？
【发布时间】：2011-04-06 09:54:04
【问题描述】：

我正在开发一个小型 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);

【问题讨论】：

标签： javascript dom select object

【解决方案1】：

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

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

appendChild( ) 会给你一个子节点的直接追加。

注意这两种方法跨浏览器的不同实现：我认为这将是您最大的痛点。 IIRC，IE 在将子级附加到 selects 时会导致问题，因此如果存在该方法，您可能想要 add 并回退到 appendChild。

【讨论】：

看起来那将是最好的选择。谢谢！

【解决方案2】：

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

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

IE在选择元素中已组的组时，无法在“根”中添加新选项。

【讨论】：

【解决方案3】：

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

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

【讨论】：

options[options.length] 最好写成options.push()
@Kulvar：不。options 不是 Array 并且没有 push() 方法。