files/ja/web/api/document/createelementns/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

---
title: Document.createElementNS()
slug: Web/API/Document/createElementNS
tags:
  - API
  - DOM
  - Method
  - Reference
translation_of: Web/API/Document/createElementNS
---
<div>{{APIRef("DOM")}}</div>

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

<p>名前空間 URI を指定せずに要素を生成する場合は、 {{DOMxRef("Document.createElement()", "createElement()")}} メソッドを使用してください。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="syntaxbox notranslate"><var>var element</var> = <var>document</var>.createElementNS(<var>namespaceURI</var>, <var>qualifiedName</var>[, <var>options</var>]);
</pre>

<h3 id="Parameters" name="Parameters">引数</h3>

<dl>
 <dt><var>namespaceURI</var></dt>
 <dd>文字列で、要素に関連付ける<a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/glossary.html#dt-namespaceURI">名前空間 URI</a> を指定します。生成される要素の {{DOMxRef("element.namespaceURI", "namespaceURI")}} プロパティは <var>namespaceURI</var> の値で初期化されます。<a href="#Important_Namespace_URIs">妥当な名前空間 URI</a> も参照してください。</dd>
 <dt><var>qualifiedName</var></dt>
 <dd>文字列で、生成される要素の型を指定します。生成される要素の {{DOMxRef("element.nodeName", "nodeName")}} プロパティは、 <var>qualifiedName</var> の値で初期化されます。</dd>
 <dt><var>options</var>{{Optional_Inline}}</dt>
 <dd>任意の <code>ElementCreationOptions</code> オブジェクトで、 <code>is</code> という名前の単一のプロパティを持ち、その値として以前に <code>customElements.define()</code> を使用して定義されたカスタム要素のタグ名を設定します。以前のバージョンの <a class="external external-icon" href="https://www.w3.org/TR/custom-elements/">Custom Elements specification</a> との後方互換性のため、ブラウザーによってはここにオブジェクトの代わりに、文字列を渡すことができ、その文字列の値はカスタム要素のタグ名になります。この引数の使い方について詳しい情報は、 <a class="external external-icon" href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">Extending native HTML elements</a> を参照してください。</dd>
 <dd>新しい要素には <code>is</code> 属性が与えられ、値はカスタム要素のタグ名になります。カスタム要素は一部のブラウザーのみで利用できる試行的な機能です。</dd>
</dl>

<h3 id="Return_value" name="Return_value">返値</h3>

<p>The new {{DOMxRef("Element")}}.</p>

<h2 id="Important_Namespace_URIs" name="Important_Namespace_URIs">重要な名前空間 URI</h2>

<dl>
 <dt><a href="/ja/docs/Web/HTML">HTML</a></dt>
 <dd><code>http://www.w3.org/1999/xhtml</code></dd>
 <dt><a href="/ja/docs/Web/SVG">SVG</a></dt>
 <dd><code>http://www.w3.org/2000/svg</code></dd>
 <dt><a href="/ja/docs/Web/MathML">MathML</a></dt>
 <dd><code>http://www.w3.org/1998/Math/MathML</code></dd>
 <dt><a href="/ja/docs/Mozilla/Tech/XUL">XUL</a> {{Non-standard_Inline}}</dt>
 <dd><code>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</code></dd>
 <dt><a href="/ja/docs/Mozilla/Tech/XBL">XBL</a> {{Non-standard_Inline}} {{Deprecated_Inline}}</dt>
 <dd><code>http://www.mozilla.org/xbl</code></dd>
</dl>

<h2 id="Example" name="Example">例</h2>

<p>これは新しい &lt;div&gt; 要素を {{Glossary("XHTML")}} 名前空間に生成し、 vbox 要素に追加します。これは有用な <a href="/ja/docs/Mozilla/Tech/XUL">XUL</a> 文書ではありませんが、二つの異なる名前空間の要素を単一の文書内で利用する方法を紹介しています。</p>

<pre class="brush: xml notranslate">&lt;?xml version="1.0"?&gt;
&lt;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()"&gt;

&lt;script type="application/javascript"&gt;&lt;![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);
 }

]]&gt;&lt;/script&gt;

 &lt;vbox id="ContainerBox" flex="1"&gt;
  &lt;html:div&gt;
   The script on this page will add dynamic content below:
  &lt;/html:div&gt;
 &lt;/vbox&gt;

&lt;/page&gt;
</pre>

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

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("DOM WHATWG", "#dom-document-createelementns", "Document.createElementNS()")}}</td>
   <td>{{Spec2("DOM WHATWG")}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<div>{{Compat("api.Document.createElementNS")}}</div>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{DOMxRef("document.createElement()")}}</li>
 <li>{{DOMxRef("document.createTextNode()")}}</li>
 <li>{{DOMxRef("Node.namespaceURI")}}</li>
 <li><a class="external" href="http://www.w3.org/TR/1999/REC-xml-names-19990114">Namespaces in XML</a></li>
</ul>