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

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 Status Comment
WHATWG HTML Living Standard
The definition of 'HTMLSelectElement.add()' in that specification.
Living Standard  
HTML5
The definition of 'HTMLSelectElement.add()' in that specification.
Recommendation Is a snapshot of WHATWG HTML Living Standard.
The value of before can now be a long and is optional. It throws a DOMError of the type HierarchyRequestError if the passed item is an ancestor of the HTMLSelectElement and no longer throws if the before parameter is not found.
Document Object Model (DOM) Level 2 HTML Specification
The definition of 'HTMLSelectElement.add()' in that specification.
Recommendation The method now throws an NOT_FOUND_ERR exception if the item of the before parameter is not a child of this element.
Document Object Model (DOM) Level 1 Specification
The definition of 'HTMLSelectElement.add()' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) ?
index as before parameter (Yes) ? 7.0 (7.0) (Yes) (Yes) (Yes)
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) ?
index as before parameter (Yes) ? 7.0 (7.0) (Yes) (Yes) (Yes)

Document Tags and Contributors

 Contributors to this page: libbymc, Sebastianz, fscholz, freaktechnik, teoli
 Last updated by: libbymc,