DOM Node チラ裏

ノードを末尾に追加

Node appendChild(Node newChild) throws DOMException;
newChildを親ノードの末尾に追加します。newChildが既にあれば、まずnewChildをドキュメントから取り除き、その後に追加します。追加に成功すると、newChildを返します。

親ノード.appendChild(追加するノード); 

ノードの挿入

Node insertBefore(newChild, refChild) throws DOMException;
newChildをrefChildの前に挿入します。newChildが既にあれば、まずnewChildをドキュメントから取り除き、その後に挿入します。挿入に成功すると、newChildを返します。

先頭に挿入

親ノード.insertBefore(追加するノード, 親ノード.firstChild);
  または
親ノード.insertBefore(追加するノード, 親ノード.childNodes.item(0));

挿入位置をノードリストの順番(数字)で指定

親ノード.insertBefore(追加するノード, 親ノード.childNodes.item(追加位置));

挿入位置を基準となるノードで指定

親ノード.insertBefore(追加するノード, 基準ノード);

末尾のひとつ手前に挿入

親ノード.insertBefore(追加するノード, 親ノード.lastChild);

指定ノードのひとつ後ろに挿入

if (基準ノード.nextSibling === null) {
  親ノード.appendChild(追加するノード); // 末尾に追加
} else {
  親ノード.insertBefore(追加するノード, 基準ノード.nextSibling); // 基準ノードの後ろに追加
}

ノードの入れ替え

Node replaceChild(newChild, oldChild) throws DOMException;
newChildをoldChildと入れ替えます。newChildが既にあれば、まずnewChildをドキュメントから取り除き、その後に入れ替えます。入れ替えに成功すると、ドキュメントから取り除かれたoldChildを返します。

親ノード.replaceChild(新ノード, 入れ替えられるノード);

ノードの削除

Node removeChild(oldChild) throws DOMException;
oldChildをドキュメントから削除します。削除に成功すると、ドキュメントから取り除かれたoldChildを返します。返されるoldChildはappendChild()等で再利用が可能です。

末尾のノードを削除

親ノード.removeChild(親ノード.lastChild);

ノードのクローン

Node cloneNode(boolean deep);
ノードをクローンします。deepがtrueなら派生ノードも再帰的にクローンします。クローンしたノード(deepがtrueなら派生ノードツリー)を返します。

先頭ノードのクローンを末尾に挿入する。

親ノード.appendChild(親ノード.firstChild.cloneNode());