【HTML5で非推奨】document.write();の代わりは？ | 学んで遊んでジャンケンポン！

うさタブ

今回はJavaScriptでのについて学ぶッピよ～！

ユウキ

画像表示？

うさタブ

そうッピ！

今まで勉強のためにdocument.write();を使っていたッピが、

誤作動が多いからdocument.write();はあまり使うことをオススメされてないッピ！

今回はdocument.write();の変わりの方法を教えるッピよ～

この記事で学べること

.createElement と .body.appendChild で要素を追加する
.getElementById と .insertAdjacentHTML要素を表示する
windws.onload を使う

document.write(“”);の代わついて学ぼう

document.write(“”);の代わついて学ぼう

サンプルコードの準備

うさタブ

学習のためのサンプルコードをコピーするッピ！

元になるコード

<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にJavaScriptを入力してね！↓ -->


</head>

<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にHTMLタグを入力してね！↓ -->



<!-- ここまで！ -->
</body>
</html>

document.write(“”);で文字を表示する

うさタブ

まずはそのままdocument.write(“”);で文字を表示するッピ！

<script>
 document.write("Hello world");
</script>

と<head></head>の中に入力するッピ！

うさタブ

これは、

<scriptjavascriptをはじめます>
document.write書き出してください(“Hello word“);
</scriptスクリプトを終わります >

という意味ッピ！

うさタブ

できたらブラウザで確認するッピよ～！

ユウキ

できたああああ！

ここまでのコード

<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にJavaScriptを入力してね！↓ -->
</head>

<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にHTMLタグを入力してね！↓ -->

<script>
 document.write("Hello world");
</script>

<!-- ここまで！ -->
</body>
</html>

document.write(“”);はHTML5では非推奨

うさタブ

ただ、document.write(“”);

というプログラムの書き方はもう使えないッピ～！

HTML５という新しいバージョンになってから、誤作動が多いこのやり方はあまりオススメできなくなったッピ・・・

うさタブ

次からはこの

document.write(“”);の代わりになるプログラム

の書き方を紹介するッピ！

.createElement と .body.appendChild で要素を追加する

うさタブ

ちょっと難しいッピが

<script>
let moji = document.createElement('p');
	moji.innerHTML = 'Hello world';
	document.body.appendChild(moji);
</script>

このやり方でもできるッピ！

うさタブ

これは

let moji変数を作ります = document.createElement要素（タグ）を作ります(‘p’作るのは<p>要素です);
moji.innerHTML<p>のHTML部分を以下のように書き換えてください = “Hello world”;
document.body.appendChild<body></body>の中に(mojimoji(<p>)をくわえて下さい);

っていう意味ッピね～

サンプルコード

<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にJavaScriptを入力してね！↓ -->
<script>

</script>
</head>

<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にHTMLタグを入力してね！↓ -->

<script>
let moji = document.createElement('p');
	moji.innerHTML = 'Hello world';
	document.body.appendChild(moji);
</script>

<!-- ここまで！ -->
</body>
</html>

.getElementById と .insertAdjacentHTML要素を表示する

うさタブ

次はHTMLタグとJavascriptを組み合わせたやり方ッピ！

<p id="moji">
<script>
      let moji = document.getElementById('moji');
	  moji.insertAdjacentHTML('afterend', 'Hello world');
</script>
</p>

これで画像を挿入することもできるッピよ～

うさタブ

<p id=”moji“>p の住所はmojiです
<scriptjavascriptを開始します>

let moji変数を作ります = document.プログラムを書き換えてgetElementById(‘moji‘);id=”moji”という場所で
moji.insertmojiを中心としてAdjacent書き換えてくださいHTML(‘afterendmojiの後ろに‘, ‘ Hello word‘);

</sctipt>javascriptを終了します
</p>pを終わります

意味はこんな感じッピ～！

うさタブ

ちなみに

.insertAdjacentHTML('afterend', 'Hello world');

の‘afterend’は

beforebegin //指定した要素の《直前》に挿入
afterbegin //指定した要素の『内部』の【最初】の子要素の前に挿入
beforeend //指定した要素『内部』の【最後】の子要素の後に挿入
afterend //指定した要素の《直後》に挿入

と変更できるッピ！

サンプルコード

<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にJavaScriptを入力してね！↓ -->
<script>

</script>
</head>

<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にHTMLタグを入力してね！↓ -->

<p id="moji">
<script>
      let moji = document.getElementById('moji');
	  moji.insertAdjacentHTML('afterend', 'Hello world');
</script>
</p>

<!-- ここまで！ -->
</body>
</html>

window.onloadで画像を表示する

うさタブ

次は window.onload で画像を表示するやり方ッピ！

うさタブ

<head></head> の <script></script> にこのコードを入力するッピ！

window.onload = function(){
	let moji = "";
	    moji += '<p>Hello world</p>';
	    document.getElementById("moji").innerHTML = moji;
}

<body></body>にはこのタグを入力するッピよ～！

<div id="moji"></div>

うさタブ

これは

window.このページをonload　読み込んだら = function()以下のプログラムを実行して{
let moji = “”;変数mojiの空箱を作ります
moji +=mojiに加えます ‘<p>段落を作ってHello world</p>‘段落を終わります;
document.プログラムを動かしてgetElementById(“moji“).id=”moji”という場所でinnerHTML 　HTMLを書き換えて= moji;変数mojiの内容に
}

という意味ッピね～！

ユウキ

いろんな方法があるんだな～

サンプルコード

<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にJavaScriptを入力してね！↓ -->
<script>
window.onload = function(){
	let moji = "";
	    moji += '<p>Hello world</p>';
	    document.getElementById("moji").innerHTML = moji;
}
</script>
</head>

<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にHTMLタグを入力してね！↓ -->

<div id="moji"></div>

<!-- ここまで！ -->
</body>
</html>

学習のまとめ