Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/API/HTMLSelectElement/add below:

HTMLSelectElement: add() メソッド - Web API

Baseline Widely available

HTMLSelectElement.add() メソッドは、この select 要素が持つ option 要素の集合に要素を追加します。

add(item)
add(item, before)

item

HTMLOptionElement または HTMLOptGroupElement です

before 省略可

集合内の要素または long 型で位置を指定します。item はその直前に挿入されます。この引数が null（または存在しない位置）であった場合、新しい要素は集合の末尾に追加されます。

なし（undefined）。

HierarchyRequestError DOMException

このメソッドに渡された item が HTMLSelectElement の祖先であった場合に発生します。

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 引数は省略可能ですので、以下のようにすることもできます。

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

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 引数は省略可能ですので、以下のようにすることもできます。

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4