---
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>