HTMLSelectElement.add()

The HTMLSelectElement.add() method adds an element to the collection of option elements for this select element.

Syntax

collection.add(item[, before]);

Parameters

  • item is an HTMLOptionElement or HTMLOptGroupElement
  • before is optional and an element of the collection, or an index of type long, representing the item should be inserted before. If this parameter is null (or the index does not exist), the new element is appended to the end of the collection.

Exceptions

HierarchyRequestError DOMException

Thrown if the item passed to the method is an ancestor of theHTMLSelectElement.

Examples

Creating Elements from Scratch

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

The before parameter is optional. So the following is accepted.

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

Append to an Existing Collection

var sel = document.getElementById("existingList");

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

The before parameter is optional. So the following is accepted.

...
sel.add(opt);
...

Inserting to an Existing Collection

var sel = document.getElementById("existingList");

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

Specifications

Specification
HTML Standard (HTML)
# dom-select-add-dev

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
add
1
12
1
5.5
≤12.1
3
1
18
4
≤12.1
1
1.0
index_before_parameter
Yes
12
7
Yes
Yes
Yes
Yes
Yes
7
Yes
Yes
Yes

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/add