Web標準化時代のJavaScript

document.write()を新しい方法で置き換える

ページ内に動的に内容を表示する場合(日付や画像など)、今までの方法ではdocument.write()を使うことが多いいでしょう。例えば以下のスクリプトはページ内に文字を表示するものです。【サンプル1を実行
■HTMLファイル
<!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" src="message.js"></script>
</body>
</html>
■スクリプトファイル
document.write("JavaScript Sample<br>");
状況によってはdocument.write()でないと駄目なこともありますが、ほとんどはinnerHTMLによって置き換える事ができます。innerHTMLは指定したHTMLタグ内にHTMLタグを含む文字列を表示するものです*1
innerHTMLを使うには、HTMLファイル内にdivタグなど文字を書き出すためのタグを用意しておきます。このタグにアクセスするための目印としてid属性でID名を指定しておきます(他の方法によるアクセスも可能ですがID名を指定する方が一般的です)。
ID名を指定しておけば以下のようにしてdivタグ内に文字列を表示することができます。
document.getElementById("ID名").innerHTML = "表示文字"
document.write()の代わりとして使うにはwindow.onloadと組み合わせることになります。実際のスクリプトは以下のようになります。【サンプル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="message.js"></script>
<title>Sample</title>
</head>
<body>
<p>ページが読み込まれるとメッセージを表示します</p>
<div id="message"></div>
</body>
</html>
■スクリプトファイル(message.js)
window.onload = function() {
var txt = "JavaScript Sample<br>";
document.getElementById("message").innerHTML = txt;

}
出力するのがタグのみの場合にはinnerHTMLだけでなくappendChild()を使う方法もあります。これに関しては「ページ内に大量に同じタグを出力する場合」を参照してください。出力するのが文字(テキスト)のみの場合はcreateTextNode()を使う方法もあります。「ページ内に文字(テキスト)だけを出力する場合」を参照してください。
*1 他にもouterHTML、innerText、outerText、textContentプロパティがあります。