HTMLSelectElement: add() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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);

/*
  理想的には下記のように生成します。

  <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);

/*
  以下のような select オブジェクトがあったとします。

  <select id="existingList">
    <option value="1">Option: Value 1</option>
    <option value="2">Option: Value 2</option>
  </select>

  すると、次のように変わります。

  <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]);

/*
  以下のような select オブジェクトがあったとします。

  <select id="existingList">
    <option value="1">Option: Value 1</option>
    <option value="2">Option: Value 2</option>
  </select>

  すると、次のように変わります。

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

仕様書

Specification
HTML Standard
# dom-select-add-dev

ブラウザーの互換性

BCD tables only load in the browser