HTMLSelectElement：add() 方法

基线 广泛可用

此功能已完善，可在许多设备和浏览器版本中使用。它自以下日期起在各浏览器中可用： 2015 年 7 月.

HTMLSelectElement.add() 方法将一个元素添加到此 select 元素的 option 元素集合中。

语法

js
add(item)
add(item, before)

参数

item

一个 HTMLOptionElement 或 HTMLOptGroupElement

before 可选

集合中的一个元素，或类型为 long 的索引，表示应在 item 之前插入的新元素。如果此参数为 null（或索引不存在），则新元素将附加到集合的末尾。

返回值

无 (undefined）。

异常

HierarchyRequestError DOMException

如果传递给方法的 item 是 HTMLSelectElement 的祖先，则抛出此异常。

示例

从头创建元素

js
const sel = document.createElement("select");
const opt1 = document.createElement("option");
const 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>
*/

before 参数是可选的。因此以下内容是可接受的。

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

追加到现有集合

js
const sel = document.getElementById("existingList");

const 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>
*/

before 参数是可选的。因此以下内容是可接受的。

js
sel.add(opt);

插入到现有集合

js
const sel = document.getElementById("existingList");

const 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 标准
# dom-select-add-dev

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。