Node: appendChild() メソッド

aChild

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

Node で追加された子ノード (aChild) を返します。 ただし、 aChild が DocumentFragment であった場合は、空の DocumentFragment を返します。

HierarchyRequestError DOMException

DOM ツリーの制約に違反した場合に発生します。すなわち、以下のいずれかが発生する場合です。

• aChild の親が Document, DocumentFragment, Element のいずれにもならない場合。
• aChild を挿入すると循環参照になる場合。すなわち aChild がこのノードの祖先である場合。
• aChild が DocumentFragment, DocumentType, Element, CharacterData のいずれでもない場合。
• 現在のノードが Text であり、親ノードが Document になる場合。
• 現在のノードが DocumentType であり、その親が Document にならない場合。 doctype は常に document の直下になければならないからです。
• このノードの親が Document で aChild が DocumentFragment であり、複数の Element の子、または Text の子がある場合。 -aChild を挿入すると Document の子の Element が複数になる場合。

指定された子ノードが文書内の既存のノードへの参照である場合、 appendChild() はそのノードを現在の位置から新しい位置に移動させます。つまり、あるノードが文書内の2点に同時に存在することはできません。新しい親の下にノードを追加する前に、ノードのコピーを作成するには Node.cloneNode() メソッドを使用することができます。cloneNode で作成されたコピーは、自動的に同期されるわけではありません。

appendChild()は親ノードではなく、新しく追加されたノードを返します。つまり、新しいノードが作成されたらすぐに、そのノードへの参照を失うことなく、追加することができます。

const paragraph = document.body.appendChild(document.createElement("p"));
// 段落に後から要素を追加することも可能です

一方で、appendChild() は fluent API 流に（JQuery のように）使用することはできません。

// 3 つの段落を追加することはできません。
// 代わりに、3 つの段落は入れ子になります。
document.body
  .appendChild(document.createElement("p"))
  .appendChild(document.createElement("p"))
  .appendChild(document.createElement("p"));

この例では、いくつかある一時変数をできるだけ使用して、入れ子の DOM 構造を作成することを試みています。

const fragment = document.createDocumentFragment();
const li = fragment
  .appendChild(document.createElement("section"))
  .appendChild(document.createElement("ul"))
  .appendChild(document.createElement("li"));
li.textContent = "hello world";

document.body.appendChild(fragment);

以下のような DOM ツリーが生成されます。

<section>
  <ul>
    <li>hello world</li>
  </ul>
</section>

• Node.removeChild()
• Node.replaceChild()
• Node.insertBefore()
• Node.hasChildNodes()
• Element.insertAdjacentElement()
• Element.append()