DOM

：

：

Node.appendChild() メソッド

　編集：2022.10.29 by T.A.

[Edge]。→、

Node の子ノード リストの末尾に指定のノードを追加します。

mdn： 指定された親ノードの子ノードリストの末尾にノードを追加します。
追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます（他のノードに追加する前にそのノードを親ノードから削除する必要はありません）。
これは、ノードが同時にドキュメントの 2 箇所に存在できないということを意味します。ノードがすでに親を持っている場合、最初にノードが削除された後、新しい位置の末尾に追加されます。
ちなみに、Node.cloneNode() は、新しい親の末尾に追加する前に、ノードのコピーを作成するために使用できます。cloneNode で作成したコピーは自動的に同期を保たないことに注意してください。

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

構文
Node.appendChild(aChild)
Node ¶必ず要素ノードでないとダメなようです。
aChild 親ノードに追加する子ノード（ふつうは要素）
戻り値

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

注意／mdn

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

var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));

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

例
mdnより

新しい段落要素を作成し、ドキュメントの body の最後に追加します。 

var p = document.createElement("p");
document.body.appendChild(p);

HTML： 

<SPAN id=IdTest>[SPAN要素。<B>[B要素]</B>テキスト]</SPAN>
[SPAN要素。[B要素]テキスト]

JavaScript： 

NL=IdTest.childNodes;  //IdTest の子ノード リストを得る。
Y=document.createElement('I');  //I 要素を作成。
Y.innerText="[I要素]";          //そのテキストを設定。
NL[0].appendChild(Y);  //作成した I 要素を最後の子ノードの後ろに追加。
	//エラー発生：Failed to execute 'appendChild' on 'Node': This node type does not support this method.

NL[1].appendChild(Y);  //作成した I 要素を最後の子ノードの後ろに追加。

表示結果：

[SPAN要素。[B要素][I要素]テキスト]

B要素の最後の子供として追加された。説明が違う。

→childNodes。document.createElement()、innerText。

JavaScript： HTMLを表示して、実行。 

TN=document.createTextNode('テストテキスト&pound;');  //テキスト ノードの作成。
IdTest.appendChild(TN);  //作成したノードを子ノードの末尾に追加。

表示結果：

[SPAN要素。[B要素]テキスト]テストテキスト&pound;
テスト