HTMLSelectElement: add() method
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.
The HTMLSelectElement.add() method adds an element to the
collection of option elements for this select element.
Syntax
js
add(item)
add(item, before)
Parameters
itembeforeOptional-
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.
Return value
None (undefined).
Exceptions
HierarchyRequestErrorDOMException-
Thrown if the item passed to the method is an ancestor of the
HTMLSelectElement.
Examples
Creating Elements from Scratch
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);
/*
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.
js
sel.add(opt1);
sel.add(opt2);
Append to an Existing Collection
js
const sel = document.getElementById("existingList");
const 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.
js
sel.add(opt);
Inserting to an Existing Collection
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]);
/*
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 # dom-select-add-dev |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
add
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Index as
before parameter
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support