jsで画面を再描画（リロードなし）する最適な方法

jsで画面を『再描画』する。（リロードなし）

やることは

一番最初に表示される画面を保存して

ボタンを押して画面の文字を変える

その後に、再度『画面を最初の状態に戻す』ボタンを押して、一番最初の画面に戻す。

つまり、一番最初の画面の状態を変数に保存しておく感じ。

これで『再描画』が可能になる。

コードはこんな感じ。

<!DOCTYPE html>
<html>
  <body>
    <div id="screen">
      <button onclick="BackToFunc()">画面を元に戻す</button>
      <button onclick="DefaultFunc()">画面を変える</button>
      <p id="demo"></p>
    </div>
    <script>
        document.getElementById("demo").innerHTML =  "最初の画面";
        var defaultHTML  = document.getElementById("screen").innerHTML;

        function BackToFunc() {
          document.body.innerHTML = defaultHTML;
        }

        function DefaultFunc() {
          document.getElementById("demo").innerHTML = "画面を変える";
        }
    </script>
  </body>
</html>

ここら辺の本を読んで、めっちゃ勉強になりました、ブログって簡単にわかるけど、深い部分で基礎が結構抜け落ちてたりするんだよね… 基礎の徹底は、良いエンジニアの基本なので、ここら辺を横着するか否かで将来のエンジニア人生も大きく変わる。なので、こういう本はしっかり読もうと思います。（お勧めなので、是非読んでみればいいと思います :)）

<br />