Document.createElementNS()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

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

语法

js
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
<?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 文档,然而,仍然建议适用。

规范

Specification
DOM
# ref-for-dom-document-createelementns①

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
createElementNS
options parameter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

参见