HTMLSelectElement.add()

在此页

句法
范例
规范
浏览器兼容性
相关话题

HTMLSelectElement.add() method adds an element to the collection of option elements for this select 元素。

句法

collection.add(item[, before]);

参数

item 是 HTMLOptionElement or HTMLOptGroupElement
before is optional and an element of the collection, or an index of type long , representing the item item should be inserted before. If this parameter is null (or the index does not exist), the new element is appended to the end of the collection.

异常

DOMError of the type HierarchyRequestError 若 item passed to the method is an ancestor of the HTMLSelectElement .

范例

Creating Elements from Scratch

var sel = document.createElement("select");
var opt1 = document.createElement("option");
var opt2 = document.createElement("option");
opt1.value = "1";
opt1.text = "Option: Value 1";
opt2.value = "2";
opt2.text = "Option: Value 2";
sel.add(opt1, null);
sel.add(opt2, null);
/*
  Produces the following, conceptually:
  <select>
    <option value="1">Option: Value 1</option>
    <option value="2">Option: Value 2</option>
  </select>
*/

The before parameter is optional. So the following is accepted.

...
sel.add(opt1);
sel.add(opt2);
...

Append to an Existing Collection

var sel = document.getElementById("existingList");
var opt = document.createElement("option");
opt.value = "3";
opt.text = "Option: Value 3";
sel.add(opt, null);
/*
  Takes the existing following select object:
  <select id="existingList">
    <option value="1">Option: Value 1</option>
    <option value="2">Option: Value 2</option>
  </select>
  And changes it to:
  <select id="existingList">
    <option value="1">Option: Value 1</option>
    <option value="2">Option: Value 2</option>
    <option value="3">Option: Value 3</option>
  </select>
*/

The before parameter is optional. So the following is accepted.

...
sel.add(opt);
...

Inserting to an Existing Collection

var sel = document.getElementById("existingList");
var opt = document.createElement("option");
opt.value = "3";
opt.text = "Option: Value 3";
sel.add(opt, sel.options[1]);
/*
  Takes the existing following select object:
  <select id="existingList">
    <option value="1">Option: Value 1</option>
    <option value="2">Option: Value 2</option>
  </select>
  And changes it to:
  <select id="existingList">
    <option value="1">Option: Value 1</option>
    <option value="3">Option: Value 3</option>
    <option value="2">Option: Value 2</option>
  </select>
*/

规范

规范	状态	注释
HTML 实时标准 The definition of 'HTMLSelectElement.add()' in that specification.	实时标准
HTML5 The definition of 'HTMLSelectElement.add()' in that specification.	推荐	Is a snapshot of HTML 实时标准 . 值 `before` can now be a long and is optional. It throws a `DOMError` of the type `HierarchyRequestError` if the passed `item` is an ancestor of the `HTMLSelectElement` and no longer throws if the `before` parameter is not found.
DOM (文档对象模型) 2 级 HTML 规范 The definition of 'HTMLSelectElement.add()' in that specification.	过时	The method now throws an NOT_FOUND_ERR exception if the item of the `before` parameter is not a child of this element.
DOM (文档对象模型) 1 级规范 The definition of 'HTMLSelectElement.add()' in that specification.	过时	初始定义

浏览器兼容性

更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`add`	Chrome Yes	Edge 12	Firefox Yes	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
Index as `before` 参数	Chrome Yes	Edge 12	Firefox 7	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 7	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes

图例

完整支持

元数据

最后修改： Jun 30, 2019

在此页

句法

参数

异常

范例

Creating Elements from Scratch

Append to an Existing Collection

Inserting to an Existing Collection

规范

浏览器兼容性

图例

相关话题