From 1649dce744ae7836e6de49971f365cc8e2bbd8f6 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 27 Feb 2022 14:34:15 +0900 Subject: 2022/01/18 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/node/appendchild/index.md | 135 +++++++++++++---------------- 1 file changed, 60 insertions(+), 75 deletions(-) diff --git a/files/ja/web/api/node/appendchild/index.md b/files/ja/web/api/node/appendchild/index.md index 3242491906..6abebeaac4 100644 --- a/files/ja/web/api/node/appendchild/index.md +++ b/files/ja/web/api/node/appendchild/index.md @@ -1,97 +1,82 @@ --- -title: Node.appendChild +title: Node.appendChild() slug: Web/API/Node/appendChild tags: - - API - - DOM - - Method - - Node - - Reference + - メソッド + - リファレンス +browser-compat: api.Node.appendChild translation_of: Web/API/Node/appendChild --- -
{{APIRef("DOM")}}
+{{APIRef("DOM")}} -

Node.appendChild() メソッドは、特定の親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます（他のノードに追加する前にそのノードを親ノードから削除する必要はありません）。

+**`appendChild()`** は {{domxref("Node")}} インターフェイスのメソッドで、指定された親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していた場合は、 `appendChild()` はその子ノードを現在の位置から新しい位置へ移動します（他のノードに追加する前に、そのノードを親ノードから取り除く必要はありません）。 -

これは、ノードが同時にドキュメントの 2 箇所に存在できないということを意味します。ノードがすでに親を持っている場合、最初にノードが削除された後、新しい位置の末尾に追加されます。{{domxref("Node.cloneNode()")}} は、新しい親の末尾に追加する前に、ノードのコピーを作成するために使用できます。cloneNode で作成したコピーは自動的に同期を保たないことに注意してください。

+これは、 1 つのノードが同時に文書の 2 か所に存在できないということです。したがって、すでにノードに親がある場合、最初にノードが取り除かれた後、新しい位置に追加されます。 +{{domxref("Node.cloneNode()")}} メソッドを使用すると、新しい親ノード以下に追加する前に、ノードのコピーを作成することができます。 +`cloneNode` で作成したコピーは自動的に同期されません。 -

このメソッドでは、異なるドキュメント間でノードを移動することはできません。異なるドキュメントからノードを末尾に追加したい場合は、{{domxref("document.importNode()")}} メソッドを使用する必要があります。

+指定された子ノードが {{domxref("DocumentFragment")}} であった場合、その +{{domxref("DocumentFragment")}} の内容全体が指定された親ノードの子ノードリストに移動します。 -

構文

+> **Note:** このメソッドとは異なり、 {{domxref("Element.append()")}} メソッドは複数の引数や文字列の追加に対応しています。ノードが要素であった場合は、こちらを使用することができます。 -
var aChild = element.appendChild(aChild);
+`appendChild()` は子要素を返すので、メソッドチェーンは動作しません。 -

引数

+```js +let aBlock = document.createElement('block').appendChild( document.createElement('b') ); +``` -

aChild

+`aBlock` に `` を追加するだけですが、 `block` に対して複数の `appendChild` を連鎖させるなど、それ以外の操作を連鎖せることはできません。 -

親ノードに追加する子ノード(要素)

+## 構文 -

戻り値

+```js +appendChild(aChild); +``` -

追加した子ノードです。ただし、{{domxref("DocumentFragment")}}を引数にした場合は、空の{{domxref("DocumentFragment")}}が戻ります。

+### 引数 -

注意

+- `aChild` + - : 指定された親ノードに追加するノード（ふつうは要素）。 -

appendChild() が子要素を返すため、メソッドチェーンが期待通りに動きません。:

+### 返値 -
var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));
+{{domxref("Node")}} で追加された子ノード (`aChild`) を返します。 +ただし、 `aChild` が {{domxref("DocumentFragment")}} であった場合は、空の {{domxref("DocumentFragment")}} を返します。 -

aBlock に <b></b> を与えただけでは期待通りに動きません。

+### 例外 -

例

+- `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")}} が複数になる場合。 -
// 新しい段落要素を作成し、ドキュメントの body の最後に追加します。
-var p = document.createElement("p");
+## 例
+
+```js
+// 新しい段落要素を作成し、文書の body の末尾に追加します。
+let p = document.createElement("p");
 document.body.appendChild(p);
-
- -

仕様

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様ステータスコメント
{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}{{Spec2('DOM WHATWG')}}{{SpecName("DOM3 Core")}} から変更なし。
{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM3 Core')}}{{SpecName("DOM2 Core")}} から変更なし。
{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM2 Core')}}{{SpecName("DOM1")}} から変更なし。
{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM1')}}初期定義。
- -

ブラウザー実装状況

- -

{{Compat("api.Node.appendChild")}}

- -
- -

関連情報

- - +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.removeChild()")}} +- {{domxref("Node.replaceChild()")}} +- {{domxref("Node.insertBefore()")}} +- {{domxref("Node.hasChildNodes()")}} +- {{domxref("Element.insertAdjacentElement()")}} +- {{domxref("Element.append()")}} -- cgit v1.2.3-54-g00ecf