HTML 要素を動的に追加する

はじめに

HTML を動的に変更する方法は、主に DOM を使ってお行儀良く行う方法と、div 要素などの innerHTML 属性に HTML を「突っ込む」方法の二通りがあります。この資料では DOM を使って動的に HTML 要素をドキュメントに追加する例を示します。

パフォーマンスに関して
ちなみに、私は実際にテストしていませんが現在の主要なブラウザではパフォーマンス上には大きな違いがないか innerHTML による要素の変更が良い結果を出しているようです. (DOM api vs innerHTML などでググってみてください) それならば、innerHTML の方が明らかに簡単ですから、あまり DOM を操作しようと思わないかもしれませんが、この資料はあえて DOM API を使ってみています。持ち駒は多いほうが良いですから。

実行例

キャプション:
URL:

この例では UL 要素 (リスト) の中に LI 要素 (リストアイテム) を、動的に生成し追加します。

構成

さっそく出来上がりのコードを示します。

<html>
<head>
<script type="text/javascript" language="JavaScript">
function bar() {
    // a 要素の作成と属性の指定
    var newAnchor = document.createElement("a");
    var newTxt = document.createTextNode( document.getElementById("favtext").value );
    newAnchor.appendChild( newTxt );
    newAnchor.setAttribute("href", document.getElementById("favurl").value );
    newAnchor.setAttribute("target", "_blanc" );
   
    // li 要素の作成
    var newLi = document.createElement("li");
    newLi.appendChild ( newAnchor );
   
    // リストに追加
    var list = document.getElementById("FavList");
    list.appendChild( newLi );   
}
</script>
</head>
<body>
<p>
リンクの追加:<br/>
<input type="text" id="favtext" /><br/>
<input type="text" id="favurl"  />
<input type="button" id="addurl" value="OK" onclick="bar();" />
<ul id="FavList">
</ul>
</p>
</body>
</html>

「LI 要素は A 要素で構成され、A 要素はテキストノードを持つ。UL 要素が (0個以上の) LI 要素を子供として持つ」という構造をわかっていれば簡単です。

var newAnchor = document.createElement('a');
var newTxt = document.createTextNode(document.getElementById('favtext').value);
newAnchor.appendChild(newTxt);
newAnchor.setAttribute('href', document.getElementById('favurl').value);
newAnchor.setAttribute('target', '_blanc');

この部分で、上図の A を作成します。createElement で A 要素を、createTextNode を表示する文字をあらわすテキストノードをそれぞれ作成し、テキストノードを A 要素にアペンドします。URL は href 属性で指定するので、setAttribute メソッドで href 属性をセットしています。

var newLi = document.createElement("li");
newLi.appendChild ( newAnchor );

次に、LI 要素を作成し、A 要素をアペンドします。

var list = document.getElementById("FavList");
list.appendChild( newLi );

最後に、LI 要素を UL 要素にアペンドします。