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.
TheHTMLSelectElement.add() method adds an element to thecollection ofoption elements for thisselect element.
Syntax
js
add(item)add(item, before)Parameters
itembeforeOptionalAn element of the collection, or an index of typelong, representing theitem should be inserted before. If thisparameter is
null(or the index does not exist), the new element isappended to the end of the collection.
Return value
None (undefined).
Exceptions
HierarchyRequestErrorDOMExceptionThrown if theitem 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> <option value="1">Option: Value 1</option> <option value="2">Option: Value 2</option> </select> And changes it to: <select> <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> <option value="1">Option: Value 1</option> <option value="2">Option: Value 2</option> </select> And changes it to: <select> <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 |