HTMLSelectElement.add()
The HTMLSelectElement.add()
method adds an element to the collection of option
elements for this select
element.
Syntax
JavaScript
Copy Code
<var>collection</var>.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 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
- A
DOMError
of the typeHierarchyRequestError
if the item passed to the method is an ancestor of the
.HTMLSelectElement
Examples
Creating Elements from Scratch
JavaScript
Copy Code
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.
JavaScript
Copy Code
... sel.add(opt1); sel.add(opt2); ...
Append to an Existing Collection
JavaScript
Copy Code
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.
JavaScript
Copy Code
... sel.add(opt); ...
Inserting to an Existing Collection
JavaScript
Copy Code
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 | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'HTMLSelectElement.add()' in that specification. |
Living Standard | |
HTML5 The definition of 'HTMLSelectElement.add()' in that specification. |
Recommendation | Is a snapshot of WHATWG HTML Living Standard. The value of before can now be a long and is optional. It throws a DOMError of the type HierarchyRequestError if the passed item is an ancestor of the HTMLSelectElement and no longer throws if the before parameter is not found. |
Document Object Model (DOM) Level 2 HTML Specification The definition of 'HTMLSelectElement.add()' in that specification. |
Recommendation | The method now throws an NOT_FOUND_ERR exception if the item of the before parameter is not a child of this element. |
Document Object Model (DOM) Level 1 Specification The definition of 'HTMLSelectElement.add()' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | ? |
index as before parameter |
(Yes) | 7.0 (7.0) | (Yes) | (Yes) | (Yes) |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | ? |
index as before parameter |
(Yes) | 7.0 (7.0) | (Yes) | (Yes) | (Yes) |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/htmlselectelement/add