scriptタグ内にhtmlタグを入れてjsデータも同時に扱う方法

Question

前提・実現したいこと

HTMLにJavaScriptを読み込ませている中での質問です。
jsデータを読み込ませて、HTMLに組み込んでいるのですが、例えば<script>タグの中で<h4>タグを組み込ませようとすると非表示になってしまいます。
h4でscript内のものを表示することはできませんか？

試したパターンは大きく2つで

① <script>タグ外に<h4>で挟み込む

<h4> <script> document.write(information[0]); </script> </h4>

//こちらの結果は非表示

② <script>タグ内に<h4>を入れ込む

<script> document.write("<h4>information[0]</h4>"); </script>

//こちらの結果は大きくinformation[0]と表示

発生している問題・エラーメッセージ

informationの中身をh4で表示させたいです。

該当のソースコード

試したこと

上記の中からクォーテーションを入れ替えたり+で繋いでみたりしましたが、いずれも非表示などで思ったような表示がされません。

補足情報（FW/ツールのバージョンなど）

Answer 1

document.writeは時代遅れのメソッドです。「エレメントの取得」→「書き換え」というのを別な方法で実装してください。

• エレメントの取得…document.getElementById、document.querySelectorなど
• エレメントの書き換え…textContent、appendChildなど

Comments

[atsuhiko-2511]

時代遅れのメソッドでしたか。ご指摘&解決策を分かりやすくご提案下さり助かりました。
早速取り掛かってみます！

Answer 2

要素を追加するのにdocument.writeはほとんど使いません。
HTMLの操作においてかなり基本的な事柄なので、JavaScriptの入門書を探してみてください。（できれば2年以内に発行されたものを探すのが良いです）

【document.write()を使わない方法 - Qiita】
https://qiita.com/michiko89/items/2db6faf4b8d121bf34a2

【innerHTMLの代わりにinsertAdjacentHTML()を使ってみようか。（DOMおれおれAdvent Calendar 2015 01日目） | Ginpen.com】
http://ginpen.com/2015/12/01/insertadjacenthtml-instead-of-innerhtml/

Comments

[atsuhiko-2511]

僕が参考にした参考書は確かに3年前に発行した物でした。(マイナビさんのHTML &CSS,JavaScriptのきほんのきほん)
ご指摘下さりありがとうございます。もう少し基礎を学んで質問出来るようにします。
参考文献も頂きとてもご丁寧な対応ありがとうございました。
早速取り掛かります。