7
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

document.write

Last updated at Posted at 2017-09-04

#document.writeとは?
document.writeはドキュメントに文字列を書き出します。

動的に文字列を書き出したいときに使用します。
文字列として書き出すのでタグ等も書き出せます。
PHPのechoみたいなものです。

<html>
<head></head>
<body>
<script>
document.write('テスト');
document.write('<h1>テスト</h1>');
document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>');
</script>
</body>
</html>

##注意点
document.writeを実行するタイミングに注意する。
基本的にDOMContentLoadedが呼ばれる前に使用する。
※非同期の処理やDOMContentLoaded実行タイミング以降で使用すると上書きされてしまいます。。。

<html>
<head></head>
<body>
<h1>テスト</h1>
<script>
document.addEventListener('DOMContentLoaded', function() {
  document.write('DOMContentLoaded以前に生成されたものを上書き');
});
window.onload = function() {
  document.write('window.onload以前に生成されたものを上書き');
}
</script>
</body>
</html>
7
10
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?