We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

这篇翻译不完整。请帮忙从英语翻译这篇文章

创建一个具有指定的命名空间URI和限定名称的元素。

要创建一个元素而不指定命名空间URI,请使用  createElement 方法。

语法

let element = 
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.createElementNS("http://www.w3.org/1999/xhtml","div");
   txtnode = document.createTextNode("这是使用createElementNS和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.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。

相关链接

文档标签和贡献者

标签: 
此页面的贡献者: xgqfrms-GitHub, RockJerffreason, FredWe
最后编辑者: xgqfrms-GitHub,