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.

The HTMLSelectElement.add() method adds an element to the collection of option elements for this select element.

Syntax

js
add(item)
add(item, before)

Parameters

item

An HTMLOptionElement or HTMLOptGroupElement

before Optional

An element of the collection, or an index of type long, representing the 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.

Return value

None (undefined).

Exceptions

HierarchyRequestError DOMException

Thrown if the item 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 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

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>
*/

Specifications

Specification

HTML
# dom-select-add-dev

Browser compatibility

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on Apr 7, 2023 by MDN contributors.

View this page on GitHub • Report a problem with this content

HTMLSelectElement: add() method

In this article

Help improve MDN