Document.createElementNS()

指定された名前空間 URI と修飾名を持つ要素を生成します。

名前空間 URI を指定せずに要素を生成する場合は、 createElement() メソッドを使用してください。

構文

var element = document.createElementNS(namespaceURI, qualifiedName[, options]);

引数

namespaceURI
文字列で、要素に関連付ける名前空間 URI を指定します。生成される要素の namespaceURI プロパティは namespaceURI の値で初期化されます。妥当な名前空間 URI も参照してください。
qualifiedName
文字列で、生成される要素の型を指定します。生成される要素の nodeName プロパティは、 qualifiedName の値で初期化されます。
optionsOptional
任意の ElementCreationOptions オブジェクトで、 is という名前の単一のプロパティを持ち、その値として以前に customElements.define() を使用して定義されたカスタム要素のタグ名を設定します。以前のバージョンの Custom Elements specification との後方互換性のため、ブラウザーによってはここにオブジェクトの代わりに、文字列を渡すことができ、その文字列の値はカスタム要素のタグ名になります。この引数の使い方について詳しい情報は、 Extending native HTML elements を参照してください。
新しい要素には is 属性が与えられ、値はカスタム要素のタグ名になります。カスタム要素は一部のブラウザーのみで利用できる試行的な機能です。

返値

The new Element.

重要な名前空間 URI

HTML
http://www.w3.org/1999/xhtml
SVG
http://www.w3.org/2000/svg
MathML
http://www.w3.org/1998/mathml
XUL 
http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
XBL   
http://www.mozilla.org/xbl

これは新しい <div> 要素を XHTML 名前空間に生成し、 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="application/javascript"><![CDATA[
 let container;
 let newdiv;
 let txtnode;

 function init(){
   container = document.getElementById("ContainerBox");
   newdiv = document.createElementNS("http://www.w3.org/1999/xhtml", "div");
   txtnode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild.");
   newdiv.appendChild(txtnode);
   container.appendChild(newdiv);
 }

]]></script>

 <vbox id="ContainerBox" flex="1">
  <html:div>
   The script on this page will add dynamic content below:
  </html:div>
 </vbox>

</page>

上記の例は XHTML 文書では推奨されていないインラインスクリプトを使用しています。この部分的な例は実際には XUL 文書に埋め込んだ XHTML があるものですが、それでもこの推奨事項は適用されます。

仕様書

仕様書 状態 備考
DOM
Document.createElementNS() の定義
現行の標準  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
createElementNSChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 あり
補足
完全対応 あり
補足
補足 Doesn't conform to the DOM spec for XUL and XHTML documents: localName and namespaceURI are not set to null on the created element.
IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
options parameterChrome 完全対応 あり
補足
完全対応 あり
補足
補足 For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Edge ? Firefox 完全対応 50
補足
完全対応 50
補足
補足 Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50, options must be an object.
IE ? Opera 完全対応 あり
補足
完全対応 あり
補足
補足 For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Safari ? WebView Android 完全対応 あり
補足
完全対応 あり
補足
補足 For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Chrome Android 未対応 なし
補足
未対応 なし
補足
補足 For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Firefox Android 完全対応 50
補足
完全対応 50
補足
補足 Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50, options must be an object.
Opera Android 完全対応 あり
補足
完全対応 あり
補足
補足 For backwards compatibility, the options argument can be an object or a string with the custom element tag name, although the string version is deprecated.
Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連情報