Ajaxでは頻繁にタグ内容が書き換えられ、タグ自体も追加、削除されることが多くなります。作成するプログラムにもよりますが、あらかじめ画面レイアウトが固定されているようなものであれば、以下のようにdocument.write()を使ってページ構築時にタグを出力してしまう方法があります。これは古くから使われている方法です。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>document.write()を使う</title>
</head>
<body>
<h1>document.write()を使う</h1>
<script type="text/javascript"><!--
for (y=0; y<10; y++)
{
for (x=0; x<15; x++)
{
imgID = "num"+x+"x"+y;
document.write('<img src="tile.gif" width="32" height="32" id="'+imgID+'">');
}
document.write("<br>");
}
// --></script>
</body>
</html>
document.write()を使った方法ではページが構築された後ではタグを出力することができません（自分自身のウィンドウに出力する事はやってはいけません）。そこで、ページ内の要素に対して子要素を追加するようにします。子要素を追加するにはappendChild()を使います。まず、追加するタグをdocument.createElement()で作成します。この時指定するタグ名は大文字でも小文字でも構いません。
作成したタグオブジェクトを追加したいオブジェクトに対してappendChild()の引数（パラメータ）として指定します。これで子要素として追加されます（ノードに追加されます）。以下のサンプルではimgタグとbrタグを追加し15×10のブロックを生成しています。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>appendChild()を使う</title>
<script type="text/javascript"><!--
function writeImage()
{
for (y=0; y<10; y++)
{
for (x=0; x<15; x++)
{
imageObj = document.createElement("img");
imageObj.src= "tile.gif";
document.getElementById("block").appendChild(imageObj);
}
brObj = document.createElement("br");
document.getElementById("block").appendChild(brObj);
}
}
// --></script>
</head>
<body onload="writeImage()">
<h1>appendChild()を使う</h1>
<div id="block"></div>
</body>
</html>
オブジェクトの属性は直接プロパティ名を指定する以外に以下のようにsetAttribute()を使って指定することもできます。setAttribute()は最初の引数（パラメータ）が属性名、次の引数が設定する値になります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>setAttribute()を使う</title>
<script type="text/javascript"><!--
function writeImage()
{
for (y=0; y<10; y++)
{
for (x=0; x<15; x++)
{
imageObj = document.createElement("img");
imageObj.setAttribute("src","tile.gif");
document.getElementById("insertPtr").appendChild(imageObj);
}
brObj = document.createElement("br");
document.getElementById("insertPtr").appendChild(brObj);
}
}
// --></script>
</head>
<body onload="writeImage()">
<h1>setAttribute()を使う</h1>
<div id="insertPtr"><img src="tile.gif" width="32" height="32"></div>
</body>
</html>
オブジェクトの最初のノードを複製して子要素を追加していくこともできます。複製を行うにはcloneNode()を使います。引数は1つでtrueまたはfalseを指定します。trueを指定すると子要素も複製されます。以下のサンプルでは画像タグのみなのでfalseを指定しています。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>cloneNode()を使う</title>
<script type="text/javascript"><!--
function writeImage()
{
blockObj = document.getElementById("block");
for (y=0; y<10; y++)
{
for (x=0; x<15; x++)
{
imageObj = blockObj.childNodes[0].cloneNode(false);
imageObj.setAttribute("src","tile.gif");
blockObj.appendChild(imageObj);
}
brObj = document.createElement("br");
blockObj.appendChild(brObj);
}
}
// --></script>
</head>
<body onload="writeImage()">
<h1>cloneNode()を使う</h1>
<div id="block"><img src="tile.gif" width="32" height="32"></div>
</body>
</html>
上記のサンプルを実行するとブロックが１つ余計にはみでてしまっています。これは複製したもとの画像タグが存在しているためです。このような場合、子要素を削除することができます。子要素を削除するにはremoveChild()を使います。削除したいオブジェクトに対して指定します。removeChild()の引数が削除したい子要素になります。（サンプルを
実行する。サンプル2を
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>cloneNode()を使う</title>
<script type="text/javascript"><!--
function writeImage()
{
blockObj = document.getElementById("block");
for (y=0; y<10; y++)
{
for (x=0; x<15; x++)
{
imageObj = blockObj.childNodes[0].cloneNode(false);
imageObj.setAttribute("src","tile.gif");
blockObj.appendChild(imageObj);
}
brObj = document.createElement("br");
blockObj.appendChild(brObj);
}
blockObj.removeChild(blockObj.childNodes[0]);
}
// --></script>
</head>
<body onload="writeImage()">
<h1>cloneNode()を使う</h1>
<div id="block"><img src="tile.gif" width="32" height="32"></div>
</body>
</html>
要素の属性（アトリビュート）を削除するのであれば、removeAttribute()を使います。引数は1つで削除したい属性名になります。以下のサンプルではテキストフィールドのvalue属性を削除しています。削除すると属性と値が消滅するため、テキストフィールド内の文字（value属性で指定しています）がなくなるため表示されなくなります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>removeAttribute()を使う</title>
<script type="text/javascript"><!--
function delAttr()
{
tfObj = document.getElementById("textField");
tfObj.removeAttribute("value");
}
// --></script>
</head>
<body>
<h1>removeAttribute()を使う</h1>
<form>
<input type="text" value="ここのvalue属性が削除..." id="textField"><br>
<input type="button" value="src属性削除" onClick="delAttr()">
</form>
</body>
</html>
このようにして属性の追加、複製、削除などを行うことができます。追加したり削除したりするオブジェクトおよび要素の位置さえ注意すれば良いでしょう。
次項ではエラー処理について説明します。
[
第五章 15:エラー処理 (try...catch)へ]
[
目次へ]
(2006.1.17)