« XMLHttpRequestのresponseXMLの表示 | メイン | Amazon ECS4 »

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で動的に生成すると多少とも面白くなるでしょう。

トラックバック

このエントリーのトラックバックURL:
http://www.yumemaro.com/apps/mt-tb.cgi/30

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)