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)
引数
返値
なし(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