Javascript TIPS No.15 HTMLタグ(要素)を動的に生成する「createElement」

Javascript TIPS

  • Javascriptを使って、HTMLタグ(要素)を動的に生成する方法を紹介します
  • id:cho45様の助言の元、やっと理解(?)できました

サンプルコード

<html lang="ja-JP">
<head><title>HTMLタグの動的生成</title>
<script type="text/javascript">

function CreateImg(){
var objImg = document.createElement('img'); 
objImg.src = "http://d.hatena.ne.jp/images/diary/w/warusanta/warusanta_p.gif"; 

var objBody = document.getElementsByTagName("body").item(0); 
objBody.appendChild(objImg); 
}

</script>
</head> 
<body> 
<input type="button" value="イメージタグの動的生成" onclick="CreateImg();">

</body> 
</html>

サンプルを見る

解説

  • ボタンがクリックされた時、BODY内にIMGタグを動的に生成するプログラムです
処理1(img要素生成)
  • イメージ要素を生成し、変数(objImg)に格納
  • 要素は
var objImg = document.createElement('img');
処理2(属性の書き換え)
  • イメージ要素のsrc属性を書き換えます
  • 書き換えると言っても、何も設定されていないので「追加する」の方がイメージしやすいかもしれません
  • オブジェクト(objImg)のsrcに画像のURLを格納する
objImg.src = "http://d.hatena.ne.jp/images/diary/w/warusanta/warusanta_p.gif";
処理3(body要素を取得)
  • body全体を取得します
  • 最後の「item(0)」の部分は、0番目の要素という意味です
  • 通常、body要素は一つしか無いので、数字を変えるとエラーになります
var objBody = document.getElementsByTagName("body").item(0);
処理4(要素の追加)
  • body要素にimg要素を追加します
  • appendChildは末尾に追加するメソッドです
objBody.appendChild(objImg);

Javascript TIPS 一覧へ戻る