JavaScriptで非推奨になった「document.write()」の代替方法と、scriptからscriptを読み出す方法

JavaScriptでテキストの表示やHTMLの出力は「document.write()」が一般的でしたが、HTML5においては強く非推奨とされています。Google（PageSpeed Insights）でも「document.write()」の記述がある場合、警告表示されます。

今のところ、表示されないということではありませんし手軽ではありますが、推奨されない…ということであれば、いづれ致命的なエラーになる前に修正しておくべきでしょう。

最適解は「textContent」や「innerHTML」

「textContent」や「innerHTML」で、任意のid="***"箇所に表示させるというもの。

<div id="output_text"></div>
<div id="output_html"></div>
<script>
document.getElementById('output_text').textContent = 'テキスト出力';
document.getElementById('output_html').innerHTML = '<strong>ＨＴＭＬ出力</strong>';
</script>

結果↓

これはこれで、正規の記述方法ではありますが、都度id設定（重複不可）のタグ指定（<div id="output_text"></div>や<div id="output_html"></div>）の記述が必要であったり、さらに<script>を記述した場合、動作しなかったりと、若干の不都合があります。

<script>の前であれば、任意の場所にid要素を記述できるのは便利かも知れませんが、後から編集する際、「このタグは何？」と戸惑うこともあります。

私だけかも知れませんが、<script>の記述場所に一括して記述してしまう方が、旧来の「document.write()」と同じ、視認性に優れていると思うのです。

…ということで、例えば「<a href="リンク先">テキスト</a>」を表示させたい場合、

<script>
(function(){
const output        = document.currentScript;
const outputTag     = document.createElement('a');
outputTag.target    = '_blank';//任意
outputTag.className = 'linkparts';//任意
outputTag.href      = 'リンク先URL';
outputTag.innerHTML = '<b>テキスト</b>';
output.parentNode.appendChild(outputTag);
}());
</script>

結果↓

となります。「outputTag」でタグ（この場合は、aタグ）を指定して、targetやclassなども指定できます。

scriptからscriptを読み出す方法

外部スクリプトファイル（***.js）を読み込みたい場合も、同様に「outputTag」に「<script>」として、srcを設定します。

<script>
(function(){
const output    = document.currentScript;
const outputTag = document.createElement('<script>');
outputTag.src   = '外部jsファイルURL';
output.parentNode.appendChild(outputTag);
}());
</script>

ちなみに「output = document.currentScript;」は、この<script>の記述場所に表示するという意味です。

ですので、

</head>直前に挿入したい場合

<script>
(function(){
const outputTag = document.createElement("script");
const outputTag.src = '外部jsファイルURL';
document.head.appendChild(outputTag);
}());
</script>

</body>直前に挿入したい場合

<script>
(function(){
const outputTag = document.createElement("script");
const outputTag.src = '外部jsファイルURL';
document.body.appendChild(outputTag);
}());
</script>

と、なります。<script>タグは</head>や</body>直前に挿入したい場合が多いと思いますので覚えておきましょう。

	JavaScript
	2022.03.02 20:45
	2022.07.07 19:15

Related entry

Pickup entry

• BACK
• NEXT