blob: 3242491906c5779f166b6f3bf27973f31acbe693 (
plain)
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
|
---
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>
|
