---
title: HTMLSelectElement.add()
slug: Web/API/HTMLSelectElement/add
tags:
  - API
  - HTML DOM
  - HTMLSelectElement
  - 参考
  - 方法
translation_of: Web/API/HTMLSelectElement/add
---
<p>{{APIRef("HTML DOM")}}</p>

<p><code><strong>HTMLSelectElement.add()</strong></code> 方法用于向 <code>select</code> 元素的 <code>option</code> 元素集合中添加一个元素。</p>

<h2 id="语法">语法</h2>

<pre class="syntaxbox"><var>collection</var>.add(item[, before]);
</pre>

<h3 id="参数">参数</h3>

<ul>
 <li><em>item</em> 是一个 {{domxref("HTMLOptionElement")}} 或 {{domxref("HTMLOptGroupElement")}}</li>
 <li><em>before</em> 是可选的，是集合中的一个元素或者类型为 <em>long </em>的一个索引，表示上面的 <em>item </em>在此之前插入。如果这个参数是 <code>null</code>（或索引不存在），新元素会添加在集合的末尾。</li>
</ul>

<h3 id="异常">异常</h3>

<ul>
 <li>如果传入的 <em>item </em>是 <code>{{domxref("HTMLSelectElement")}}</code> 的祖先元素，<code>HierarchyRequestError</code> 类型的 {{domxref("DOMError")}} 会被抛出。</li>
</ul>

<h2 id="示例">示例</h2>

<h3 id="从零开始创建元素">从零开始创建元素</h3>

<pre class="brush: js">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);

/*
  概念上与下述代码相同：

  &lt;select&gt;
    &lt;option value="1"&gt;Option: Value 1&lt;/option&gt;
    &lt;option value="2"&gt;Option: Value 2&lt;/option&gt;
  &lt;/select&gt;
*/</pre>

<p>before 参数是可选的，因此也可以这样写：</p>

<pre class="brush: js">...
sel.add(opt1);
sel.add(opt2);
...
</pre>

<h3 id="添加到已存在集合的末尾">添加到已存在集合的末尾</h3>

<pre class="brush: js">var sel = document.getElementById("existingList");

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

sel.add(opt, null);

/*
  获取这个已存在的 select 对象：

  &lt;select id="existingList"&gt;
    &lt;option value="1"&gt;Option: Value 1&lt;/option&gt;
    &lt;option value="2"&gt;Option: Value 2&lt;/option&gt;
  &lt;/select&gt;

  将其变成这样：

  &lt;select id="existingList"&gt;
    &lt;option value="1"&gt;Option: Value 1&lt;/option&gt;
    &lt;option value="2"&gt;Option: Value 2&lt;/option&gt;
    &lt;option value="3"&gt;Option: Value 3&lt;/option&gt;
  &lt;/select&gt;
*/
</pre>

<p>同样，before 参数是可选的，因此也可以这样写：</p>

<pre class="brush:js">...
sel.add(opt);
...
</pre>

<h3 id="插入到已存在的集合中间">插入到已存在的集合中间</h3>

<pre class="brush: js">var sel = document.getElementById("existingList");

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

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

/*
  获取这个已存在的 select 对象：

  &lt;select id="existingList"&gt;
    &lt;option value="1"&gt;Option: Value 1&lt;/option&gt;
    &lt;option value="2"&gt;Option: Value 2&lt;/option&gt;
  &lt;/select&gt;

  将其变成这样：

  &lt;select id="existingList"&gt;
    &lt;option value="1"&gt;Option: Value 1&lt;/option&gt;
    &lt;option value="3"&gt;Option: Value 3&lt;/option&gt;
    &lt;option value="2"&gt;Option: Value 2&lt;/option&gt;
  &lt;/select&gt;
*/
</pre>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">注释</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#dom-select-add', 'HTMLSelectElement.add()')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-select-add', 'HTMLSelectElement.add()')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>{{SpecName("HTML WHATWG")}} 的一个快照（snapshot）。<br>
    <code>before</code> 的值为 long 类型，且可选。如果传入的 <code>item</code><em> </em>是 <code>{{domxref("HTMLSelectElement")}}</code> 的祖先元素，<code>HierarchyRequestError</code> 类型的 {{domxref("DOMError")}} 会被抛出。不传入 <code>before</code> 参数时不再抛出异常。</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 HTML', 'html.html#ID-14493106', 'HTMLSelectElement.add()')}}</td>
   <td>{{Spec2('DOM2 HTML')}}</td>
   <td>如果 <code>before</code> 参数不是这个元素的子代，会抛出 NOT_FOUND_ERR 异常。</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-html.html#ID-14493106', 'HTMLSelectElement.add()')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>初始定义。</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("api.HTMLSelectElement.add")}}</p>