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
add(item)
add(item, before)
Parameters
item
before
Optional-
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
HierarchyRequestError
DOMException
-
Thrown if the item passed to the method is an ancestor of the
HTMLSelectElement
.
Examples
Creating Elements from Scratch
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.
sel.add(opt1);
sel.add(opt2);
Append to an Existing Collection
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.
sel.add(opt);
Inserting to an Existing Collection
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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
add | ||||||||||||
Index as before parameter |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support