aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/api/node/appendchild/index.md
diff options
context:
space:
mode:
Diffstat (limited to 'files/ja/web/api/node/appendchild/index.md')
-rw-r--r--files/ja/web/api/node/appendchild/index.md97
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>&lt;b&gt;&lt;/b&gt;</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>