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
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
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 Standard # dom-select-add-dev |
Browser compatibility
BCD tables only load in the browser