Document: write() メソッド

警告: document.write() メソッドの使用は固く避けるべきです。

HTML 仕様書自体で次のように警告しています

このメソッドの挙動はとても特異です。場合によっては、このメソッドは構文解析の実行中に HTML パーサーの状態に影響を与え、結果として文書のソースに対応しない DOM を生成することがあります(例えば、書き込まれた文字列が "<plaintext>" や "<!--" であった場合など)。他にも、document.open() が呼び出されたかのように、最初に現在のページをクリアしてしまう場合もあります。さらに多くの場合、メソッドは単に無視されるか、例外が発生します。ユーザーエージェントは このメソッドで挿入された script 要素の実行を回避することが明確に許可されています。さらに悪いことに、このメソッドの正確な動作はネットワークの遅延に依存する場合があり、デバッグがとても難しい失敗につながる可能性があります。これらすべての理由から、このメソッドを使用することは固く推奨されません。 したがって、document.write() を使用するのはやめましょう。そして可能であれば、使用している既存のコードを更新しましょう。

Document.write() メソッドは、テキストの文字列を document.open() で開かれた文書ストリームに書き込みます。

メモ: document.write() は文書のストリームに書き込みを行うため、閉じられた (読み込み済みの) 文書で document.write() を呼び出すと、自動的に document.open() が呼び出され、文書がクリアされます

構文

js
write(markup)

引数

markup

文書に書き込まれるテキストを含む文字列です。

返値

なし (undefined)。

html
<html lang="ja">
  <head>
    <title>書き込み例</title>

    <script>
      function newContent() {
        document.open();
        document.write("<h1>新しい内容では、古い内容は削除されます!</h1>");
        document.close();
      }
    </script>
  </head>

  <body onload="newContent();">
    <p>元の文書コンテンツ。</p>
  </body>
</html>

メモ

出力したテキストは文書構造モデルにおいて構文解析されます。上記の例では、 h1 要素は文書中の一つのノードになります。

document.open() を呼び出さずに読み込まれた文書へ書き込みを行うと、自動的に document.open() の呼び出しが実行されます。一度出力し終わったとき、ブラウザーにページの読み込みの終了を伝えるために、 document.close() を呼び出すことが推奨されます。

document.write() の呼び出しがインラインの HTML の <script> タグ内で行われた場合、 document.open() は呼び出されません。次に例を示します。

html
<script>
  document.write("<h1>メインタイトル</h1>");
</script>

メモ: document.write() および document.writeln は、 XHTML 文書では動作しません(エラーコンソールに "Operation is not supported" [NS_ERROR_DOM_NOT_SUPPORTED_ERR] エラーが表示されます)。これは、 .xhtml の拡張子を持つローカルファイルを開いたり、何らかの文書が application/xhtml+xmlMIME タイプで提供されたときに発生します。詳細は W3C XHTML FAQ で確認することができます。

メモ: document.writedeferred または asynchronous のスクリプト内では無視され、エラーコンソールに "A call to document.write() from an asynchronously-loaded external script was ignored" などのメッセージが表示されます。

メモ: Edge のみ、document.write()<iframe> 内で複数回呼び出すと、 SCRIPT70: Permission denied エラーが発生します。

メモ: Chrome 55 からは、キャッシュされていない HTTP の場合、document.write() を通じて挿入された <script> 要素は実行されなくなります。これが成立するのに必要な条件の一覧については、document.write() に対する介入をご覧ください。

仕様書

Specification
HTML
# dom-document-write-dev

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
write
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Deprecated. Not for use in new websites.
Has more compatibility info.

関連情報