Node.appendChild

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

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

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

var aChild = element.appendChild(aChild);

aChild

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

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

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

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

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

// 新しい段落要素を作成し、ドキュメントの body の最後に追加します。
var p = document.createElement("p");
document.body.appendChild(p);

• Node.removeChild()
• Node.replaceChild()
• Node.insertBefore()
• Node.hasChildNodes()
• ParentNode.append()