initial commit

1 files changed, 168 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/htmlselectelement/add/index.html b/files/zh-cn/web/api/htmlselectelement/add/index.html
new file mode 100644
index 0000000000..dfd9dbcb54
--- /dev/null
+++ b/files/zh-cn/web/api/htmlselectelement/add/index.html
@@ -0,0 +1,168 @@
+---
+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 class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.HTMLSelectElement.add")}}</p>