Ajaxではページ内容を頻繁に書き換えることが多くなります。そのような場合、テキストがdivタグまたはspanタグに出力されます。divタグでもspanタグでも同じなので、ここではdivタグにしぼって説明します。
まず、テキストをdivタグに表示してみましょう。テキストを表示するために、あらかじめdivタグのid属性にID名を指定しておきます。ID名を指定すればgetElementById()によりアクセスすることができます。divタグ内にテキストを表示する場合にはinnerHTMLプロパティに表示したい文字を入れます。innerHTMLプロパティにはテキストを入れますが、テキスト内にHTMLタグが含まれる場合、タグ内容が反映されます。以下のサンプルはinnerHTMLを使ってHTMLタグを含む文字列を表示します。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>HTMLへのアクセス方法（innerHTML）</title>
<script type="text/javascript"><!--
function outHTML()
{
document.getElementById("subContent").
innerHTML = "<b>HTMLタグ</b>が反映されます";
}
// --></script>
</head>
<body>
<h1>HTMLへのアクセス方法（innerHTML）</h1>
<form>
<input type="button" value="HTMLを表示" onClick="outHTML()"><br>
</form>
<div id="subContent"></div>
</body>
</html>
AjaxでHTMLタグを含むテキストを出力する場合、クロスサイトスクリプティングが行われないような注意が必要です。特にサーバー側で別サイトのデータを取得してページ上に出力する際にscriptタグを含まないことを確認するようにしてください。
HTMLを含むテキストではなく通常のテキストを出力することもできます。通常のテキストはinnerHTMLの代わりにinnerTextを指定します。以下のサンプルでは文字列にHTMLタグが含まれますが、タグも通常のテキストとして表示されます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>HTMLへのアクセス方法（innerText）</title>
<script type="text/javascript"><!--
function outTEXT()
{
document.getElementById("subContent").
innerText = "<b>HTMLタグ</b>は反映されません";
}
// --></script>
</head>
<body>
<h1>HTMLへのアクセス方法（innerText）</h1>
<form>
<input type="button" value="テキストを表示" onClick="outTEXT()"><br>
</form>
<div id="subContent"></div>
</body>
</html>
このサンプルはInternet Explorer、Safari、Operaなどほとんどのブラウザで動作しますが、残念ながらFirefoxでは動作しません。FirefoxはinnerTextプロパティではなくtextContentプロパティにテキストを入れる必要があります。つまり以下のように記述しなければテキストが表示されません。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>HTMLへのアクセス方法（textContent）</title>
<script type="text/javascript"><!--
function outTEXT()
{
document.getElementById("subContent").
textContent = "<b>HTMLタグ</b>は反映されません";
}
// --></script>
</head>
<body>
<h1>HTMLへのアクセス方法（textContent）</h1>
<form>
<input type="button" value="テキストを表示" onClick="outTEXT()"><br>
</form>
<div id="subContent"></div>
</body>
</html>
しかし、このようにブラウザによって処理が異なると面倒です。このような場合には独自のメソッドを作って利用するようにします。以下のサンプルではsetText()メソッドを作成し、表示するテキストを引数に指定することでFirefoxと、他のブラウザで共通のスクリプトで動作するようにしています。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>HTMLへのアクセス方法（textContent, innerText）</title>
<script type="text/javascript"><!--
function outTEXT()
{
$("subContent").
setText("<b>HTMLタグ</b>は反映されません");
}
function $(tagID)
{
var tagObj = document.getElementById(tagID);
tagObj.setText = function (srcText) {
if (navigator.userAgent.indexOf("Firefox") > -1) {
tagObj.textContent = srcText;
}else{
tagObj.innerText = srcText;
}
}
return tagObj;
}
// --></script>
</head>
<body>
<h1>HTMLへのアクセス方法（textContent, innerText）</h1>
<form>
<input type="button" value="テキストを表示" onClick="outTEXT()"><br>
</form>
<div id="subContent"></div>
</body>
</html>
これでHTMLタグを含むテキスト、普通のテキスト（標準テキスト）をdivタグ内に表示できます。しかし、divタグ内にはテキストだけでなく画像なども表示することも多くあります。innerHTMLでHTMLタグごと出力できるわけですから、直接imgタグを指定してしまうことで画像を表示することができます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>HTMLへのアクセス方法（直接タグ出力して画像表示）</title>
<script type="text/javascript"><!--
function outHTML()
{
document.getElementById("subContent").innerHTML = "<img src='dog.jpg'>";
}
// --></script>
</head>
<body>
<h1>HTMLへのアクセス方法（直接タグ出力して画像表示）</h1>
<form>
<input type="button" value="HTMLタグで画像を表示" onClick="outHTML()"><br>
</form>
<div id="subContent"></div>
</body>
</html>
これで画像の扱いも問題ないように見えます。しかし、Ajaxでは頻繁にdivタグ内を書き換えることが多くなるでしょう。innerHTMLではdivタグ内にあるデータを全部書き換えてしまうため、画像を追加したりテキストを追加したりする場合に非常に面倒な事になってしまいます。出力するタグが多くなればタグの記述ミスも発生しますし、何より困るのが出力したタグ（データ、オブジェクト）の管理が面倒であるという点です。
このような場合には、オブジェクトをノードに追加することで解決できます。まず、出力したいタグをcreateElement()を使って作成します。作成すると、オブジェクトデータが返されます。これにより、生成したオブジェクトを管理することができるようになります。あとは必要に応じてsetAttribute()などを使って属性値を設定します。最後に、どのオブジェクトに追加するかを指定します。今回の場合にはdivタグ内に追加するわけなのでappendChild()を使います。これによりdivタグの子ノードとなります。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>HTMLへのアクセス方法（子要素追加）</title>
<script type="text/javascript"><!--
function outHTML()
{
imageObj = document.createElement("img");
imageObj.setAttribute("src","dog.jpg");
document.getElementById("subContent").appendChild(imageObj);
}
// --></script>
</head>
<body>
<h1>HTMLへのアクセス方法（子要素追加）</h1>
<form>
<input type="button" value="appendChildを使って画像を表示" onClick="outHTML()"><br>
</form>
<div id="subContent"></div>
</body>
</html>
ボタンをクリックすると次々と画像が表示されていきます。これは子ノードとして追加されたためです。もし、すでに子ノードがある場合には追加しないようにするのであればhasChildNodes()で子ノードがあるかどうかを調べます。戻り値がfalseなら無し、trueなら子ノードがあることになります。実際のサンプルは以下のようになります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>HTMLへのアクセス方法（子要素追加2）</title>
<script type="text/javascript"><!--
function outHTML()
{
imageObj = document.createElement("img");
imageObj.setAttribute("src","dog.jpg");
divObj = document.getElementById("subContent");
if(
divObj.hasChildNodes() == false)
{
divObj.appendChild(imageObj);
}
}
// --></script>
</head>
<body>
<h1>HTMLへのアクセス方法（子要素追加2）</h1>
<form>
<input type="button" value="appendChildを使って画像を表示" onClick="outHTML()"><br>
</form>
<div id="subContent"></div>
</body>
</html>
他にもcloneNode()やreplaceChild()使って様々な操作を行うことができます。（cloneNode()のサンプルを
実行する）
ノードが、どのようになっているかを確認したいのであればFirefoxのDOM Inspectorを利用すると良いでしょう。ツールメニューからDOM Inspectorを選択すればウィンドウが表示され、ページ内のノードの状況がわかります。
それでは、次項では他のタグについて見てみます。
[
第五章 5:HTMLへのアクセス方法 - その他のタグ -へ]
[
目次へ]
(2006.1.12)