The HTMLSelectElement.add()
method adds an element to the collection of option
elements for this select
element.
The HTMLSelectElement.add()
method adds an element to the collection of option
elements for this select
element.
js
add(item) add(item, before)
None (undefined
).
HierarchyRequestError
DOMException
Thrown if the item passed to the method is an ancestor of the HTMLSelectElement
.
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);
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);
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> */
Specification |
---|
HTML Standard # dom-select-add-dev |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
add |
1 | 12 | 1 | 5.5 | ≤12.1 | 3 | 4.4 | 18 | 4 | ≤12.1 | 1 | 1.0 |
index_before_parameter |
35 | 12 | 8 | 5.5 | 22 | 9 | 37 | 35 | 8 | 22 | 9 | 3.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/add