Web/API/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

A DOMError of the type HierarchyRequestError if the item passed to the method is an ancestor of the HTMLSelectElement.

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
HTML Living StandardThe definition of 'HTMLSelectElement.add()' in that specification.	Living Standard
HTML5The definition of 'HTMLSelectElement.add()' in that specification.	Recommendation	Is a snapshot of 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 SpecificationThe definition of 'HTMLSelectElement.add()' in that specification.	Obsolete	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 SpecificationThe definition of 'HTMLSelectElement.add()' in that specification.	Obsolete	Initial definition

Browser compatibility

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`add`	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
Index as `before` parameter	Chrome Full support Yes	Edge Full support 12	Firefox Full support 7	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 7	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Legend

Full support: Full support

HTMLSelectElement.add() by Mozilla Contributors is licensed under CC-BY-SA 2.5.