JavaScriptでHTMLをダイナミックに書き換える　前編：DOMの基本を学ぼう（6）（2/2 ページ）

» 2008年07月02日 00時00分公開

ある要素の直前に追加する（insertBefore）

　これまでのサンプルでは、要素を追加するところに、それを収容する要素が事前に準備されていました。しかし、あるタグ要素を追加したいときに、その追加したいタグを収容する要素がすでに存在しているとは限りません。そのような場合に役に立つのがinsertBeforeメソッドです。このメソッドは名前の通り、あるタグ要素の前に、新たな要素を追加するメソッドです。正確に言うと、親となるタグ要素があり、その直下の子要素のいずれかを指定し、その直前に新たな要素を追加します。

　insertBeforeメソッドには2つの引数を与えて使います。1つ目は、新たに追加したい要素ノードオブジェクトです。2つ目は、追加したい要素の場所を表すために使う、直前の子要素のノードオブジェクトです。

　次のサンプルを見て、具体的な使い方を見ていきましょう。

<body>
　 <div id="title1">DOM</div>
　 <div id="title3">HTML</div>
</body>

　このHTMLには、BODYタグの直下に2つのDIVタグ要素が並んでいます。この2つのDIVタグ要素の間に<div id="t

insertBefore.html
<script type="text/javascript">
　 /*（1）BODYタグの要素ノードオブジェクト*/
　 var bodyNode = document.getElementsByTagName('body').item(0);
　 /*（2）title3のDIVタグの要素ノードオブジェクト*/
　 var title3Node = document.getElementById('title3');
　 /*（3）新たにDIVタグの要素ノードを作成する*/
　 var newNode = document.createElement('div');
　 /*（4）新たにテキストノードを作成する*/
　 var textNode = document.createTextNode('CSS');
　 /*（1）作成したテキストノードをDIVタグ要素の子要素として追加する*/
　 newNode.appendChild(textNode);
　 /*（6）新たに作成したDIVタグ要素にid属性をセット*/
　 newNode.id = 'title2';
　 /*（7）title3のDIVタグ要素の直前に、完成したDIVタグを追加する*/
　 bodyNode.insertBefore(newNode, title3Node);
</script>

　（1）では、親要素となるBODYタグの要素ノードオブジェクトを変数bodyNodeに格納します。

　（2）では、新たなDIVタグ要素を挿入する場所の基準となる、title3のDIVタグ要素オブジェクトを変数title3Nodeに格納しておきます。

　（3）～（6）で、新たに挿入するDIVタグ要素を生成します。変数newNodeには、<divid="title2">CSS</div>というHTML要素が格納されていることになります。

　最後に（7）でinsertBeforeメソッドを使って、所定の場所に新たなDIVタグ要素を追加します。

　このスクリプトを実行すると、次のようなHTMLに変化します。

<body>
　 <div id="title1">DOM</div>
　 <div id="title2">CSS</div>
　 <div id="title3">HTML</div>
</body>

　insertBeforeメソッドの親要素、基準となる子要素の関係をしっかりと理解してください。insertBeforeメソッドは、親要素のノードオブジェクトを必要とします。今回のサンプルでは、親要素がBODYタグですので非常にわかりやすく簡単でしたが、実際のHTMLでは、親要素を参照するノードオブジェクトを用意するのが面倒な場合があります。例えば、id属性がセットされていない場合や、同じタグがいくつも点在している場合です。このようなときには、parentNodeプロパティをうまく使うことで簡便化が図れます。このサンプルでは、（7）の部分を次のように書き換えることができます。

　title3Node.parentNode.insertBefore(newNode, title3Node);

　title3Node.parentNodeは、BODYタグ要素ノードを参照しています。これであれば、（1）は不要になります。直前の要素ノードの参照を取得するだけで、その親要素がなにかを知る必要もなく、insertBeforeメソッドが使えるようになります。

　insertBeforeメソッドがあるのならinsertAfterメソッドもあるのではないかと思った方が多いのではないでしょうか。残念ながら、そのようなメソッドはDOMでは規定されていません。実際問題、そのようなメソッドは不要です。恐らくinsertAfterメソッドが必要と思われるシーンとは、要素列の最後に新たな要素を追加したいときでしょう。しかし、もし新たに作ったDIVタグ要素を最後に挿入したいのであれば、（7）を次のように書き換えれば対処できます。

　bodyNode.appendChild(newNode);

　appendChildメソッドは、親要素の直下に子要素が存在していれば、末尾に追加します。