JavaScriptのdocument.writeとdocument.writelnとは？使い方・違い・注意点を初心者向けに解説

document.write() と document.writeln() は、HTML ドキュメントに文字列や画像などを直接書き出すためのメソッドです。
ページ生成時に動的な内容を挿入する際に利用できますが、使い方を誤るとページ内容が消えてしまうため注意が必要です。

write / writeln の基本

document.write(データ); // データを書き出す
document.writeln(データ); // データを書き出して改行する

注意： ページ読み込み後に document.write() を実行すると、
現在のページ内容がすべて消えてしまうため、通常は使用しません。

document.write() は、引数として渡した文字列・HTML・画像タグなどをそのままページに書き出します。

document.write(“こんにちは、” + name + “さん！”);

→ 変数 name の値を含めて「こんにちは、〇〇さん！」と表示されます。

document.write(“<strong>太字の文字</strong>”);

→ 太字で表示されます。

document.writeln() は、write() と同じくデータを書き出しますが、
最後に自動で改行文字（\n）が追加されます。

ただし、改行を画面に反映させるには、出力先を <pre> タグで囲む必要があります。

document.writeln(“<img src=\”cat1.gif\” alt=\”\”>”);

→ 画像 cat1.gif を表示し、その後に改行が入ります。