JavaScript（js）の変数を使用して HTMLを表示する

CMSなどの場合、テンプレート部分が固定でHTMLを表示することがあります。
この固定のHTML部分を変更したり、追加したりしたい時に使える
2つの方法になります。JSを利用します。ご確認ください。

jsのinnerHTMLを使用する方法
jsのdocument.write()を使用する方法

jsのinnerHTMLを使用する方法

innerHTMLを使用し、HTML に JavaScriptの変数を表示する。

HTML

<html>
<head>
  <title>サンプル１</title>
</head>
<body>  
  <p> Hello! <span id="insert"></span></p>
  
  <script>
      document.getElementById('input').innerHTML = 
      "<span style=\"color:red\">World</span>" ;
  </script>
</body>
</html>

結果
下記のように展開される（spanの中にspanは普通は記載しないのですが、ここはテストということで）
 Hellow! World

jsのdocument.write()を使用する方法

document.write() プロパティを使用して、JavaScript 変数を HTML 本文に表示する。

document.write() プロパティは、JavaScriptの変数やオブジェクトをWEBページの本文に表示することができます。
下記のように記述することができます。

<html>
<head>
  <title>サンプル２</title>
  <script>
    let insert= "<span style=\"color:red\">World</span>";
    function str(){
      document.write(insert);}
  </script>
</head>
<body>  
  <p> Hello! <script>str(insert)</script></p>
</body>
</html>

結果
サンプル１と同じように下記のように展開される。
 Hello! World