HTMLでdocument.write() はダメで使用しない!javascript で非推奨!使い方は?innerhtmlなど

document.writeは使用しない!非推奨!
  • URLをコピーしました!
document.writeは使用しない!非推奨!
document.writeは使用しない!非推奨!

PageSpeed Insightsでdocument.writeは使用しないとのメッセージが表示されました。非推奨の理由はなぜでしょうか。

HTML ページのスクロールせずに見える範囲に、レンダリングをブロックする外部 JavaScript ファイルへの参照が含まれていることを PageSpeed Insights が検出した場合にトリガーされます。

画面にテキストを表示する document.write です。これはブラウザーのレンダリングに悪影響が出たり、DOMへの影響などを考慮して「強く非推奨」とされています。

JavaScriptの勉強を始めて最初に書いたコードがの方は多いのではないのでしょうか。

目次

HTMLでdocument.write() はダメで使用しない!非推奨!

document.writeが非推奨の理由は?

W3Cはdocument.writeのHTML5での使用を非推奨としていて、HTMLパーサーに影響を与えるようです。

実行しても無視されるか例外が投げられることがあるよーとか、ネットワークの待ち時間に依存などなどもあります。やっぱり使うのはダメそうです。

ブラウザーのレンダリングに悪影響が出たり、DOMへの影響などを考慮して「強く非推奨」とされています。

非同期スクリプトについて詳しくは、パーサー ブロックと非同期 JavaScript をご覧ください。 非同期スクリプトは、指定された順序での実行は保証されません。また、document.write は使用しないでください。

引用元:javascriptを非同期にする

次にMDN document.write()説明ページを読んでみましょう

①非同期の使い勝手が悪いです。deferred または asynchronous のスクリプト内では無視されます

deferred または asynchronous のスクリプト内では無視

②期待通りに処理が動かない可能性があります。

Chrome55からキャッシュされていないHTTP の場合、document.write()を通じて挿入された<script>要素は実行されない

innerhtmlでの使い方!対処・解決方法は?

対処法①:Element.insertAdjacentHTML

利用して対処します。

innerHTMLを高機能にしたようなものと感じました。innerHTMLとは、html要素の中身を変更できるJavaScriptの便利な機能です。

Element.innerHTML = '<p>hello!</p>';

というイコールを使ってコンテンツの挿入を行いますが、これは

Element.insertAdjacentHTML('beforebegin', '<p>hello!</p>');

のように第1引数にElementからの相対位置、第2引数に挿入するコンテンツを指定します。innerHTMLではElement内のコンテンツをまるっと書き換えるだけでしたが、insertAdjacentHTMLでは細かな挿入位置の指定ができるのが魅力です。

対処法②:appendChild & insertBefore

appendChild はノードの一番下にノードを追加できます。

// Elementの子ノードリストの一番下に追加する
const inserted_child = Element.appendChild(child);

insertBeforeは指定した要素の前に、ノードを追加できます。

// Elementの子ノード<h2>の直前に追加する
const inserted_child = Element.insertBefore(child, Element.querySelector('h2'));

nextSiblingを使って直後に追加もできます。

// Elementの子ノード<h2>の直後に追加する
const inserted_child = Element.insertBefore(child, Element.querySelector('h2').nextSibling);
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次
閉じる