ページ内に文字（テキスト）だけを出力する場合
ページ内に文字だけを出力する場合もあります。まず、従来の方法で文字を表示させるスクリプトを見てみましょう。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>ページが読み込まれると文字を表示します</p>
<script type="text/javascript"><!--
document.write("今晩は。明日も頑張りましょう。");
// --></script>
</body>
</html>
document.write()ではページ構築後に内容を書き換えることができません。このような場合には他の項でも説明したようにページが読み込まれたらinnerHTMLに表示する文字を入れるようにします。サンプル1をinnerHTMLを使って書き換えたものが以下のサンプル2です。【
サンプル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="text.js"></script>
<title>Sample</title>
</head>
<body>
<p>ページが読み込まれると文字を表示します</p>
<div id="messageArea"></div>
</body>
</html>
■スクリプトファイル (text.js)
window.onload = function() {
var divObj = document.getElementById("messageArea");
divObj.innerHTML = "今晩は。明日も頑張りましょう。";
}
書き出すデータが文字のみでHTMLタグを含まない場合にはinnerHTMLよりもinnerTextを使う方が良いでしょう。特にinnerHTMLとは異なり不等号なども実体参照に変換しなくても、そのまま出力されるため便利なこともあります。【
サンプル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="text.js"></script>
<title>Sample</title>
</head>
<body>
<p>ページが読み込まれると文字を表示します</p>
<div id="messageArea"></div>
</body>
</html>
■スクリプトファイル (text.js)
window.onload = function() {
var divObj = document.getElementById("messageArea");
divObj.innerText = "<b>今晩は</b>。明日も頑張りましょう。";
}
しかし、上記のサンプル3はInternet Explorer、Safari、Operaでは動作しますが、Firefoxでは動作しません。これはFirefoxがinnerTextをサポートしていないためです。FirefoxではinnerTextの代わりにtextContentを使うことになっているためです
*1。この場合、別々のプロパティになっているからといってブラウザを判別して処理する必要はありません。innerTextとtextContentを併記するだけで済みます。【
サンプル4を実行】
■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="text.js"></script>
<title>Sample</title>
</head>
<body>
<p>ページが読み込まれると文字を表示します</p>
<div id="messageArea"></div>
</body>
</html>
■スクリプトファイル (text.js)
window.onload = function() {
var divObj = document.getElementById("messageArea");
divObj.innerText = "今晩は。明日も頑張りましょう。";
divObj.textContent = "今晩は。明日も頑張りましょう。";
}
文字だけを出力する場合にはテキストノードを作成する方法もあります。テキストノードを作成し、指定したタグの子として追加します。テキストノードの作成はdocument.createTextNode()を使い、引数（パラメータ）には表示する文字を指定します。作成されたテキストノードをappendChild()で親タグに追加することでページ上に表示する事ができます*2。この場合、document.write()とは異なり、後から文字を削除したり置換、複製することができます。これはノードとして内部に作成されているためでdocument.write()で文字を生成する場合と比べて柔軟な処理を行うことができます。【
サンプル5を実行】
■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="text.js"></script>
<title>Sample</title>
</head>
<body>
<p>ページが読み込まれると文字を表示します</p>
<div id="messageArea"></div>
</body>
</html>
■スクリプトファイル (text.js)
window.onload = function() {
var divObj = document.getElementById("messageArea");
var text = document.createTextNode("今晩は。明日も頑張りましょう。");
divObj.appendChild(text);
}
*1
textContentプロパティはSafari 2、Opera 9などではサポートされているため、これらのブラウザではinnerText、textContentのどちらを使用しても問題はありません。
*2
insertBefore()を使う方法もあります。これは挿入するオブジェクトと、挿入位置を示すオブジェクトを指定する必要があります。手軽さから言えばinserBefore()よりもappendChild()の方が楽です。