JS|Document.writeメソッドは使用しないで下さいと叱られて|廃止命令の代替手法探索

勘違いしながらドはまりしながら作り上げていく『JavaScript奮闘記』。事始めのJavaScript常識をまとめたページや現在作ろうとしてるクイズの仕様説明はこちら。

ポク太郎です。

10年←高齢者にとってはつい最近こと。

でも高齢者の常識をないがしろにするGoogleに叱られました。

Document.writeメソッドは使用しないで下さい。

インターネット大王に叱られたら成す術が無いので、その代替手法を勉強しました。


document.writeメソッドは廃止!

JavaScriptの計算結果をそのHTML内部に表示させてくれるありがたい簡単命令document.write()

var tmp='書き込むテキスト';
document.write(tmp);

これだけで「書き込むテキスト」とHTML内に表示されます。

が、この機能が廃止されるとのこと。つい最近の10年位前の話。

document.writeの代替手法探す

こちらのページによると、insertAdjacentHTML()メソッドが使えるらしい。

let elem = document.getElementById('id指定するエレメント');
elem.insertAdjacentHTML(posi, '書き込むテキスト')

挿入する位置を引数posiで以下のように指定。

insertAdjacentHTML()メソッドの引数
引数posiの値意味
‘beforebegin’エレメントの前に追加
‘afterbegin’エレメントの子要素の先頭に追加
‘beforeend’エレメントの子要素の最後に追加
‘afterend’エレメントの後に追加

なのでHTML内にこうエレメントを設置し、

<div id="debug"></div>

こういうJavaScriptを書くと、上記エレメント前に表示してくれます。

var tmp='書き込むテキスト';
let elem = document.getElementById('debug');
elem.insertAdjacentHTML('beforebegin', tmp);

ここから表示領域~

ここまで表示領域。

廃止するくらいなら最初から策定すんじゃねーよ。高齢者はそう簡単に軌道修正できないんだぞ。

「恵まれない高齢者に愛の手を」って学校で習わなかったのか?

コメント

タイトルとURLをコピーしました