diff options
Diffstat (limited to 'files/ja/web/api/node/appendchild/index.md')
-rw-r--r-- | files/ja/web/api/node/appendchild/index.md | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/files/ja/web/api/node/appendchild/index.md b/files/ja/web/api/node/appendchild/index.md new file mode 100644 index 0000000000..3242491906 --- /dev/null +++ b/files/ja/web/api/node/appendchild/index.md @@ -0,0 +1,97 @@ +--- +title: Node.appendChild +slug: Web/API/Node/appendChild +tags: + - API + - DOM + - Method + - Node + - Reference +translation_of: Web/API/Node/appendChild +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Node.appendChild()</strong></code> メソッドは、特定の親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます(他のノードに追加する前にそのノードを親ノードから削除する必要はありません)。</p> + +<p>これは、ノードが同時にドキュメントの 2 箇所に存在できないということを意味します。ノードがすでに親を持っている場合、最初にノードが削除された後、新しい位置の末尾に追加されます。{{domxref("Node.cloneNode()")}} は、新しい親の末尾に追加する前に、ノードのコピーを作成するために使用できます。<code>cloneNode</code> で作成したコピーは自動的に同期を保たないことに注意してください。</p> + +<p>このメソッドでは、異なるドキュメント間でノードを移動することはできません。異なるドキュメントからノードを末尾に追加したい場合は、{{domxref("document.importNode()")}} メソッドを使用する必要があります。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>aChild</em> = <em>element</em>.appendChild(<em>aChild</em>);</pre> + +<h3 id="引数">引数</h3> + +<h4 id="aChild">aChild</h4> + +<p>親ノードに追加する子ノード(要素)</p> + +<h3 id="戻り値">戻り値</h3> + +<p>追加した子ノードです。ただし、{{domxref("DocumentFragment")}}を引数にした場合は、空の{{domxref("DocumentFragment")}}が戻ります。</p> + +<h2 id="Notes" name="Notes">注意</h2> + +<p><code>appendChild()</code> が子要素を返すため、メソッドチェーンが期待通りに動きません。:</p> + +<pre class="brush: js"><code>var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));</code></pre> + +<p><code>aBlock</code> に <code><b></b></code> を与えただけでは期待通りに動きません。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">// 新しい段落要素を作成し、ドキュメントの body の最後に追加します。 +var p = document.createElement("p"); +document.body.appendChild(p); +</pre> + +<h2 id="仕様">仕様</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-node-appendchild', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>{{SpecName("DOM3 Core")}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>{{SpecName("DOM2 Core")}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>{{SpecName("DOM1")}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>初期定義。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> + +<p>{{Compat("api.Node.appendChild")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Node.removeChild()")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Node.hasChildNodes()")}}</li> + <li>{{domxref("ParentNode.append()")}}</li> +</ul> |