HTML出力するJavaScriptのソース例

JavaScriptでhtml生成する

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一白山中(ennya.hatenablog.com)</title>
</head>
<body>

<p>
JavaScript は直接に HTML ソースの中に書くことはできる
</p>
<script>
document.write("<h1>これはタイトルです</h1>");
document.write("<p>これは段落です。</p>");
</script>
<p>
HTML 出力途中で、 <strong>document.write</strong>使用すべきであるが、もし
HTML 読み込み完了後に利用すると、（例えば、関数の中で）、HTMLを覆ることになる</p>

</body>
</html>

上記ですと、ただHTML生成するだけですが、もし画面読み込み完了後に、イベントでdocument.write利用すると、画面全体的に更新されます

<script>
function myfunction(){
    document.write("関数でdoucment.write実行する。いわゆるページレンダリング後で実行されると、画面全体的に更新される");
}
document.write("<h1>これはタイトルです</h1>");
document.write("<p>これは一つの段落です</p>");
</script>
<p >
HTML生成処理中に<strong>document.write</strong>を利用すべきです。 もし、ページレンダリング後で、利用すると、画面全体的に更新されます。</p>
<button type="button" onclick="myfunction()">ここクリックしてください</button>

※画面更新される問題の対策

<button onclick="winTest()">ボタン</button>
function winTest()
{
    var txt1 = "This is a new window.";
    var txt2 = "This is a test.";
    document.open("text/html","replace");//追加
    document.writeln(txt1);
    document.write(txt2);
    document.close();//追加
}