Nos bénévoles n'ont pas encore traduit cet article en Français. Inscrivez-vous et aidez-nous à réaliser cette tâche !
Vous pouvez également lire cet article en English (US).

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 or HTMLOptGroupElement
  • 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

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 Status Comment
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 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.
Obsolete 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.
Obsolete Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android ?
Index as before parameterChrome Full support YesEdge Full support YesFirefox Full support 7IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 7Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

Étiquettes et contributeurs liés au document

Contributeurs à cette page : connorshea, arronei, libbymc, Sebastianz, fscholz, freaktechnik, teoli
Dernière mise à jour par : connorshea,