HTMLSelectElement : mthode add()

Baseline Large disponibilit

Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

En savoir plus
Voir la compatibilit complte

La mthode add() de l'interface HTMLSelectElement ajoute un lment option la collection d'lments pour cet lment HTML select.

Syntaxe

add(item)
add(item, before)

Paramtres

item: Un objet HTMLOptionElement ou HTMLOptGroupElement
before Facultatif: Un lment de la collection, ou un indice de type long, reprsentant l'endroit o l'objet doit tre insr. Si ce paramtre vaut null (ou si l'indice n'existe pas), le nouvel lment est ajout la fin de la collection.

Valeur de retour

Aucune (undefined).

Exceptions

HierarchyRequestError DOMException: Leve si l'objet pass la mthode est un anctre de HTMLSelectElement.

Exemples

Crer des lments partir de zro

const sel = document.createElement("select");
const opt1 = document.createElement("option");
const opt2 = document.createElement("option");

opt1.value = "1";
opt1.text = "Option : Valeur 1";

opt2.value = "2";
opt2.text = "Option : Valeur 2";

sel.add(opt1, null);
sel.add(opt2, null);

/*
  Produit conceptuellement le rsultat suivant :

  <select>
    <option value="1">Option : Valeur 1</option>
    <option value="2">Option : Valeur 2</option>
  </select>
*/

Le paramtre before est optionnel. Donc ce qui suit est accept.

sel.add(opt1);
sel.add(opt2);

Ajouter une collection existante

const sel = document.getElementById("existingList");

const opt = document.createElement("option");
opt.value = "3";
opt.text = "Option : Valeur 3";

sel.add(opt, null);

/*
  Prend l'objet select existant suivant :

  <select id="existingList">
    <option value="1">Option : Valeur 1</option>
    <option value="2">Option : Valeur 2</option>
  </select>

  Et le modifie ainsi :

  <select id="existingList">
    <option value="1">Option : Valeur 1</option>
    <option value="2">Option : Valeur 2</option>
    <option value="3">Option : Valeur 3</option>
  </select>
*/

Le paramtre before est optionnel. Donc ce qui suit est accept.

sel.add(opt);

Insrer dans une collection existante

const sel = document.getElementById("existingList");

const opt = document.createElement("option");
opt.value = "3";
opt.text = "Option: Value 3";

sel.add(opt, sel.options[1]);

/*
  Prend l'objet select existant suivant :

  <select id="existingList">
    <option value="1">Option : Valeur 1</option>
    <option value="2">Option : Valeur 2</option>
  </select>

  Et le modifie ainsi :

  <select id="existingList">
    <option value="1">Option : Valeur 1</option>
    <option value="3">Option : Valeur 3</option>
    <option value="2">Option : Valeur 2</option>
  </select>
*/

Spcifications

Spcification
HTML # dom-select-add-dev

Compatibilit des navigateurs

Aider amliorer MDN

Cette page vous a-t-elle t utile ?

Oui Non

Apprendre contribuer

Cette page a t modifie le 16 janv. 2026 par les contributeurices du MDN.

Voir cette page sur GitHub Signaler un problme avec ce contenu