Document.createElementNS() - Web API 接口参考 编辑
创建一个具有指定的命名空间URI和限定名称的元素。
要创建一个元素而不指定命名空间URI,请使用 /wiki/zh-CN/docs/Web/API/Document/createElement 方法。
语法
let element =
document./wiki/zh-CN/docs/Web/API/Document/createElementNS(namespaceURI, qualifiedName[, options]);
参数
namespaceURI
- 指定与元素相关联的命名空间URI的字符串。创建的元素的namespaceURI属性使用namespaceURI的值进行初始化。 参见有效的命名空间URL。
qualifiedName
- 指定要创建的元素的类型的字符串。 创建的元素的nodeName属性使用qualifiedName的值进行初始化。
options
可选的- 一个可选的包含单个属性的ElementCreationOptions对象,其值是预先使用customElements.define()定义的自定义元素的标签名称。为了向后兼容自定义元素规范的早期版本,一些浏览器允许您在此使用字符串替代对象,其中字符串的值是自定义元素的标签名称。有关如何使用此参数的详情,请参阅原生HTML元素。
- 新元素将被赋予一个属性,其值是自定义元素的标签名称。 自定义元素是实验中的功能,目前仅在某些浏览器中可用。
返回值
新元素。
有效的命名空间URI
- HTML - 参阅
http://www.w3.org/1999/xhtml
- SVG - 参阅
http://www.w3.org/2000/svg
- XBL - 参阅
http://www.mozilla.org/xbl
- XUL - 参阅
http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
示例
在XHTML命名空间中创建一个新的<div>元素并将其添加到vbox的结尾处。虽然这不是一个非常有用的XUL文档,它演示了在单个文档中使用来自两个不同命名空间的元素:
<?xml version="1.0"?>
<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
title="||Working with elements||"
onload="init()">
<script type="text/javascript"><![CDATA[
var container;
var newdiv;
var txtnode;
function init(){
container = document.getElementById("ContainerBox");
newdiv = document./wiki/zh-CN/docs/Web/API/Document/createElementNS("http://www.w3.org/1999/xhtml","div");
txtnode = document./wiki/zh-CN/docs/Web/API/Document/createTextNode("这是使用/wiki/zh-CN/docs/Web/API/Document/createElementNS和/wiki/zh-CN/docs/Web/API/Document/createTextNode动态构造的文本,然后使用appendChild插入到文档中。");
newdiv.appendChild(txtnode);
container.appendChild(newdiv);
}
]]></script>
<vbox id='ContainerBox' flex='1'>
<html:div>
此页面上的脚本将添加以下动态内容:
</html:div>
</vbox>
</page>
上面给出的示例中使用了在XHTML文档中不推荐的内联脚本。这个特定的示例实际上是一个嵌入XHTML的XUL文档,然而,仍然建议适用。
规范
规范 | 状态 | 说明 |
---|---|---|
DOM Document./wiki/zh-CN/docs/Web/API/Document/createElement | Living Standard |
浏览器兼容性
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
options argument | (Yes)[1] | 未实现 | 50 (50)[2][3] | ? | ? | ? |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
[1]在本规范的早期版本中,此参数只是一个字符串,其值是自定义元素的标签名称。为了向后兼容性,Chrome同时接受这两种格式。
[2] 参阅[1]:像Chrome一样,Firefox从51版开始在这里接受一个字符串而不是一个对象。但是在版本50中,选项必须是对象。
[3] 要在Firefox中实验自定义元素,必须将dom.webcomponents.enabled和dom.webcomponents.customelements.enabled首选项设置为true。
相关链接
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论