【JavaScript】画面の要素を書き換える方法【vanillaJS】

はじめに

　今回紹介するのはjQueryでいうところの.empty()と.append()です。一度画面の要素を空にしてから新たに記述するオーソドックスな書き換えです。

実装方法

step
1まずは要素を取得して中身を空にする

<div id="change-part">
　~いろいろな要素~
</div>

上記のように変更したい部分をdivで囲み、idで名前を付けます。

let changeInf = document.querySelector("#change-part");
changeInf.innerHTML = null;

その後、JSで上記のように記述します。querySelectorは要素を取得するメソッドであり、格納した変数のinnerHTMLをnullにすることで要素を空にできます。これが.emptyと同じ処理となっています。

step
2空になった要素へ新たな要素を追加する

<div id="change-part">
    <div class="year-wrapper">
    <p class="display-month" id="year">テスト</p>
    </div>
</div>

例として上記のブロックを新たに作成してみます。change-partは先ほど中身を消したのでもう一段階内側のyear-wrapperから作成していきます。

let divsYear = document.createElement('div');
divsYear.className = 'year-wrapper';

let yearDom = document.createElement('p');
yearDom.className = 'display-month';
yearDom.id = 'year';
yearDom.textContent = 'テスト';

//上で作成した要素を組み立てていく
changeInf.appendChild(divsYear);
divsYear.appendChild(yearDom);

document.createElement('div')のように()内に主要な要素を記述することでいろんな要素を作成できます。

そしてclassNameに値を入れることでclass名を指定することができます。

これを繰り返していきすべての要素を作成しておきます。

その後、最後の記述部分のappendChildで要素を組み立てていきます。

1番目の手順で取得しておいたchangeInfにまず1番近いyear-wrapperを追加し、その後も外側から順番に子要素に追加していきます。

まとめ

jQueryが使えるか、他のフレームワークが使える場合はそちらを使うほうが完全に楽なので、強制されていない場合これらの方法は使うことは無いと思います。

なのでメモ程度に見てみてください。