Hatena::ブログ(Diary)

latest log このページをアンテナに追加 RSSフィード

2008-01-30 [JavaScript] DOM Nodeに子ノードを追加

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());

shinriyoshinriyo 2011/12/16 18:54 参考にしました。

指定ノードのひとつ後ろに挿入の説明ですが、
else文にある、insertBeforeは正しいでしょうか?

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト

コメントを書くには、なぞなぞ認証に回答する必要があります。

トラックバック - http://d.hatena.ne.jp/uupaa/20080130/1201718067