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!

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support(Yes)(Yes)(Yes)(Yes)(Yes)(Yes)
options argument(Yes)[1]未实现50 (50)[2][3]???
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

词条统计

浏览:42 次

字数:5708

最后编辑:2 年前

最近更新:JSmiles

编辑次数:1 次

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文