DOMで内容を入れ替える

さてさて

　前回は要素の追加を行ったので、今回は入れ替えをやってみようかと思う。

firstChild.nodeValueで内容を入れ替える

　まず、分りやすいのは、ノードの値に文字列を直接設定する方法。
　要素を入れ替えてる訳ではなく、要素の持っている内容を入れ替える。

　ノードの最初の子供(firstChild)の内容(nodeValue)ということで、次のように書けば良い。

var theNode = document.getElementById('test1');
theNode.firstChild.nodeValue = "nodeValueで入れ替え";

入れ替え前

入れ替え

replaceChildで要素を入れ替え

　次は、前回学習したcreateTextNodeメソッドで内容を作っておいて、replaceChildメソッドで入れ替える方法。
　コレは、内容だけを入れ替えるんじゃなくて、要素そのものを入れ替える。
　となると、TextNodeだけじゃなくて、色々な要素を作って足せる筈だし、olなんかのリストやテーブルを一気に追加、ってのもできそうだ。

　とりあえず、TextNodeでやってみるとこんな感じかな。

var theText = document.createTextNode('replaceChildで入れ替え');
var theNode = document.getElementById('test2');
theNode.replaceChild(theText,theNode.firstChild);

入れ替え前

入れ替え

removeChildで要素を削除

　ついでに、removeChildで削除もやってみる。
　ほぼ、replaceChildに近い感じ。

var theNode = document.getElementById('test3');
theNode.removeChild(theNode.firstChild);

削除前

削除

さてどーする

　どーも、こんな感じで全メソッドを試して行くことになりそう。

　今日はここまで。