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 2015年7月.
HTMLSelectElement.add() メソッドは、この select 要素が持つ option 要素の集合に要素を追加します。
構文
js
add(item)
add(item, before)
引数
itembefore省略可-
集合内の要素または long 型で位置を指定します。item はその直前に挿入されます。この引数が
null（または存在しない位置）であった場合、新しい要素は集合の末尾に追加されます。
返値
なし（undefined）。
例外
HierarchyRequestErrorDOMException-
このメソッドに渡された 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> # dom-select-add-dev> |