HTMLSelectElement.add() - Web API 接口参考 编辑
HTMLSelectElement.add()
方法用于向 select
元素的 option
元素集合中添加一个元素。
语法
collection.add(item[, before]);
参数
- item 是一个
HTMLOptionElement
或HTMLOptGroupElement
- before 是可选的,是集合中的一个元素或者类型为 long 的一个索引,表示上面的 item 在此之前插入。如果这个参数是
null
(或索引不存在),新元素会添加在集合的末尾。
异常
- 如果传入的 item 是
的祖先元素,HTMLSelectElement
HierarchyRequestError
类型的DOMError
会被抛出。
示例
从零开始创建元素
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>
*/
before 参数是可选的,因此也可以这样写:
...
sel.add(opt1);
sel.add(opt2);
...
添加到已存在集合的末尾
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>
*/
同样,before 参数是可选的,因此也可以这样写:
...
sel.add(opt);
...
插入到已存在的集合中间
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>
*/
规范
规范 | 状态 | 注释 |
---|---|---|
HTML Living Standard HTMLSelectElement.add() | Living Standard | |
HTML5 HTMLSelectElement.add() | Recommendation | HTML Living Standard 的一个快照(snapshot)。before 的值为 long 类型,且可选。如果传入的 item 是 的祖先元素,HierarchyRequestError 类型的 DOMError 会被抛出。不传入 before 参数时不再抛出异常。 |
Document Object Model (DOM) Level 2 HTML Specification HTMLSelectElement.add() | Obsolete | 如果 before 参数不是这个元素的子代,会抛出 NOT_FOUND_ERR 异常。 |
Document Object Model (DOM) Level 1 Specification HTMLSelectElement.add() | Obsolete | 初始定义。 |
浏览器兼容性
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论