ページ内に大量に同じタグを出力する場合
ページ内に同じタグ（imgタグなど）を大量に出力する場合も従来とは異なる方法を使います。大量に出力しない場合でも以下に説明する方法が有効な場合があるでしょう。まず、従来の方法で同じ画像を20個表示させるスクリプトを見てみましょう。document.write()を使ってページの構築時にタグを書き出します。【
サンプル1を実行】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
</head>
<body>
<p>ページが読み込まれると画像を20枚を表示します</p>
<script type="text/javascript"><!--
for (i=0; i<20; i++) {
document.write("<img src='icon.gif' width='32' height='32'>");
}
// --></script>
</body>
</html>
この方法でも問題ありませんが、後からimgタグを追加する場合には困ってしまいます。ページが構築された後ではdocument.write()が使えないためです。手軽な方法としてはinnerHTMLを使ってimgタグを繰り返し出力します。ただし、aタグなどのように終了タグが必要なものは、開始タグと終了タグの１セットでinnerHTMLに出力する必要があります。開始タグだけを出力した場合には自動的に終了タグが付加されます。また、以下のサンプルのように毎回innerHTMLに出力すると非常に速度が低下します。大量に出力する場合には変数に一括して出力するタグやデータを入れておいてからinnerHTMLに出力するのが良いでしょう。【
サンプル2を実行】
■HTMLファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="image.js"></script>
<title>Sample</title>
</head>
<body>
<p>ページが読み込まれると画像を20枚を表示します</p>
<div id="imageArea"></div>
</body>
</html>
■スクリプトファイル (image.js)
window.onload = function() {
window.onload = function() {
var divObj = document.getElementById("imageArea");
var imageNum = 20;
for (var i=0; i<imageNum; i++) {
divObj.innerHTML += "<img src='icon.gif' width='32' height='32'>";
}
}
上記サンプルのようにinnerHTMLを使っても動作には問題ありませんが、タグに指定する属性が多くなると間違いが発生することもあります。特にイベント処理を指定するような場合には複雑になってしまいます。
タグなどのエレメントを追加する場合にはinnerHTMLよりもcreateElementを使ってタグ（オブジェクト）を生成し、各プロパティに必要な値を設定します。imgタグの生成はdocument.createElement("img")とします。生成されたimgオブジェクトに対してsrcプロパティには画像URLを、画像の幅はwidth, heightに設定します。設定が終わったらタグを追加します。これはあらかじめ追加するための親オブジェクト（タグ）を用意しておき、その親タグの子として追加します。子として追加するにはappendChild()を使います
*1。appendChild()の引数（パラメータ）には追加するオブジェクトを指定します。【
サンプル3を実行】
■HTMLファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="image.js"></script>
<title>Sample</title>
</head>
<body>
<p>ページが読み込まれると画像を20枚を表示します</p>
<div id="imageArea"></div>
</body>
</html>
■スクリプトファイル (assign.js)
window.onload = function() {
var divObj = document.getElementById("imageArea");
var imageNum = 20;
for (var i=0; i<imageNum; i++) {
var imgTag = document.createElement("img");
imgTag.src = "icon.gif";
imgTag.width = 32;
imgTag.height = 32;
divObj.appendChild(imgTag);
}
}
*1
insertBefore()を使う方法もあります。これは挿入するオブジェクトと、挿入位置を示すオブジェクトを指定する必要があります。手軽さから言えばinserBefore()よりもappendChild()の方が楽です。