diff options
Diffstat (limited to 'files/zh-cn/web/api/htmlselectelement/add/index.html')
| -rw-r--r-- | files/zh-cn/web/api/htmlselectelement/add/index.html | 168 |
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); + +/* + 概念上与下述代码相同： + + <select> + <option value="1">Option: Value 1</option> + <option value="2">Option: Value 2</option> + </select> +*/</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 对象： + + <select id="existingList"> + <option value="1">Option: Value 1</option> + <option value="2">Option: Value 2</option> + </select> + + 将其变成这样： + + <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> +*/ +</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 对象： + + <select id="existingList"> + <option value="1">Option: Value 1</option> + <option value="2">Option: Value 2</option> + </select> + + 将其变成这样： + + <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> +*/ +</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> |