blob: 6abebeaac443b1c4e40957d0635856343b575c4d (
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
|
---
title: Node.appendChild()
slug: Web/API/Node/appendChild
tags:
- メソッド
- リファレンス
browser-compat: api.Node.appendChild
translation_of: Web/API/Node/appendChild
---
{{APIRef("DOM")}}
**`appendChild()`** は {{domxref("Node")}} インターフェイスのメソッドで、指定された親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していた場合は、 `appendChild()` はその子ノードを現在の位置から新しい位置へ移動します（他のノードに追加する前に、そのノードを親ノードから取り除く必要はありません）。
これは、 1 つのノードが同時に文書の 2 か所に存在できないということです。したがって、すでにノードに親がある場合、最初にノードが取り除かれた後、新しい位置に追加されます。
{{domxref("Node.cloneNode()")}} メソッドを使用すると、新しい親ノード以下に追加する前に、ノードのコピーを作成することができます。
`cloneNode` で作成したコピーは自動的に同期されません。
指定された子ノードが {{domxref("DocumentFragment")}} であった場合、その
{{domxref("DocumentFragment")}} の内容全体が指定された親ノードの子ノードリストに移動します。
> **Note:** このメソッドとは異なり、 {{domxref("Element.append()")}} メソッドは複数の引数や文字列の追加に対応しています。ノードが要素であった場合は、こちらを使用することができます。
`appendChild()` は子要素を返すので、メソッドチェーンは動作しません。
```js
let aBlock = document.createElement('block').appendChild( document.createElement('b') );
```
`aBlock` に `<b></b>` を追加するだけですが、 `block` に対して複数の `appendChild` を連鎖させるなど、それ以外の操作を連鎖せることはできません。
## 構文
```js
appendChild(aChild);
```
### 引数
- `aChild`
- : 指定された親ノードに追加するノード（ふつうは要素）。
### 返値
{{domxref("Node")}} で追加された子ノード (`aChild`) を返します。
ただし、 `aChild` が {{domxref("DocumentFragment")}} であった場合は、空の {{domxref("DocumentFragment")}} を返します。
### 例外
- `HierarchyRequestError` {{domxref("DOMException")}}
- : DOM ツリーの制約に違反した場合に発生します。すなわち、以下のいずれかが発生する場合です。
- `aChild` の親が {{domxref("Document")}}, {{domxref("DocumentFragment")}}, {{domxref("Element")}} のいずれにもならない場合。
- `aChild` を挿入すると循環参照になる場合。すなわち `aChild` がこのノードの祖先である場合。
- `aChild` が {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} のいずれでもない場合。
- 現在のノードが {{domxref("Text")}} であり、親ノードが {{domxref("Document")}} になる場合。
- 現在のノードが {{domxref("DocumentType")}} であり、その親が {{domxref("Document")}} にならない場合。 _doctype_ は常に _document_ の直下になければならないからです。
- このノードの親が {{domxref("Document")}} で `aChild` が {{domxref("DocumentFragment")}} であり、複数の {{domxref("Element")}} の子、または {{domxref("Text")}} の子がある場合。
-`aChild` を挿入すると {{domxref("Document")}} の子の {{domxref("Element")}} が複数になる場合。
## 例
```js
// 新しい段落要素を作成し、文書の body の末尾に追加します。
let p = document.createElement("p");
document.body.appendChild(p);
```
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{domxref("Node.removeChild()")}}
- {{domxref("Node.replaceChild()")}}
- {{domxref("Node.insertBefore()")}}
- {{domxref("Node.hasChildNodes()")}}
- {{domxref("Element.insertAdjacentElement()")}}
- {{domxref("Element.append()")}}
|
