DOM APIを利用したHTMLの生成
DOMのAPIであるcreateElementやappendChildを利用して、JavaScriptで動的にHTMLを生成できます。ページをロードすること無く、一部をレンダリングするAJAXの基本的なテクニックです。
簡単なリンク集を作成するコードを示します。
var URL = new Array("http://foo.com/","http://bar.co.jp/");
var TITLE = new Array("foo","bar");
function displayLinks(){
// 表示用コンテナ
var container = document.getElementById('links');
// リセット
container.innerHTML='';
var ul=document.createElement('ul');
container.appendChild(ul);
for(var i=0;i<URL.length;i++){
var li=document.createElement('li');
var a=document.createElement('a');
// 'href'属性の設定
a.setAttribute('href',URL[i]);
// ラベル
a.appendChild(document.createTextNode(TITLE[i]));
li.appendChild(a);
ul.appendChild(li);
}
}
displayLinks()を呼び出せば<div id="links"></div>部分に配列URLとTITLEを元に以下のHTMLに相当する要素を動的に生成します。もちろんソースの表示では見えません。
<ul> <li><a href="http://foo.com/">foo</a></li> <li><a href="http://bar.com/">bar</a></li> </ul>
hrefは<a>タグの属性ですので、setAttributeを用いて設定しています。配列をXMLHttpRequestで動的に生成すると多少とも面白くなるでしょう。