1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
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>
|
