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
orHTMLOptGroupElement
-
before is optional and 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.
Exceptions
HierarchyRequestError
DOMException
-
Thrown 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 |
---|
HTML Standard # dom-select-add-dev |
Browser compatibility
BCD tables only load in the browser