JS ノードの編集方法 追加・削除・置換・挿入する方法

今回は、「ノード」を追加したり、削除したりするメソッドをご紹介させて頂きます。

それぞれがどのように動作するのかを理解するのは難しくはないのですが、とても沢山のメソッドがあるので、混乱してしまう場合があります。

一つ一つご自身でコードを書きながら学習を進めるようにしてください。

create*

createElement

「document.createElement(tag)」でタグの新しい要素を作成します。

let div = document.createElement('div');

createTextNode

「document.createTextNode(text)」で新しいテキストノードを作成します。

let textNode = document.createTextNode('Hello World');

createAttribute

「document.createAttribute()」で属性ノードを作成します。

let cAttribute = document.createAttribute('id');
cAttribute.value = 'attri';

属性値：id、属性名：attri を作成します。

ノードを子ノードに追加する

prepend

「prepend」メソッドは、新しいノードを子ノードの先頭に追加します。

HTML

      <h2>動物</h2>
      <ul id="animals">
        <li id="dog">犬</li>
        <li id="cat">猫</li>
        <li id="bird">鳥</li>
        <li id="panda">パンダ</li>
      </ul>

let firstLi = document.createElement("li");
firstLi.prepend("馬");

animals.prepend(firstLi);

• 馬
• 犬
• 猫
• 鳥
• パンダ

append

「append」メソッドは、新しいノードを子ノードの最後尾に追加します。

let lastLi = document.createElement("li");
lastLi.append("馬");

animals.append(lastLi);

• 犬
• 猫
• 鳥
• パンダ
• 馬

appendChild

「appendChild」メソッドは、新しいノードを子ノードの最後尾に追加します。

let lastLi = document.createElement("li");
lastLi.innerHTML = "馬";

animals.appendChild(lastLi);

• 犬
• 猫
• 鳥
• パンダ
• 馬

before

「before」メソッドは、指定した子ノードの前に、新しいノードを挿入します。

let deer = document.createElement("li");
deer.append("鹿");

let deerList = document.getElementById("cat");
deerList.before(deer);

• 犬
• 鹿
• 猫
• 鳥
• パンダ
• 馬

insertBefore

「insertBefore」メソッドは、指定した子ノードの前に新しいノードを挿入します。

let deer = document.createElement("li");
deer.append("鹿");

let parentUl = document.getElementById("animals");
let deerList = document.getElementById("cat");
parentUl.insertBefore(deer, deerList);

after

「after」メソッドは、指定した子ノードの後に新しいノードを挿入します。

let deer = document.createElement("li");
deer.append("鹿");

let deerList = document.getElementById("cat");
deerList.after(deer);

• 犬
• 猫
• 鹿
• 鳥
• パンダ
• 馬

「鹿」の位置を確認してください。

ノードの置き換え

replaceWith

「replaceWith」メソッドは、既存のノードを新しいノードに置き換えます。

let deer = document.createElement("li");
deer.append("鹿");

let deerList = document.getElementById("cat");
deerList.replaceWith(deer);

• 犬
• 鹿
• 鳥
• パンダ
• 馬

「猫」が「鹿」に変わっています。

replaceChild

「relaceChild」メソッドは、既存のノードを新しいノードに置き換えます。

let deer = document.createElement("li");
deer.append("鹿");

let parentUl = document.getElementById("animals");
let deerList = document.getElementById("cat");
parentUl.replaceChild(deer, deerList);

ノードを削除する

remove

「remove」メソッドは、ノードを削除します。

let element2 = document.getElementById("animals");
element2.lastElementChild.remove();

• 犬
• 猫
• 鳥

最後の「パンダ」が消えています。

removeChild

「removeChild」メソッドは、ノードを削除します。

let element2 = document.getElementById("animals");
element2.removeChild(element2.lastElementChild);

• 犬
• 猫
• 鳥

最後のパンダが消えています。

ノードを指定した場所に挿入する

insertAdjacentHTML

「insertAdjacentHTML」メソッドは、指定した場所にHTML文のノードを挿入します。

読み方は「インサートアジェイスントゥHTML」になります。

（カタカナで書くとちょっと微妙な感じなので、辞書等で発音を確認しておいてください。）

「element.insertAdjacentHTML(position, html）」の形で書く必要があります。

positionに取れる値は以下の4種類になります。

• beforebigin：要素の前にHTMLを挿入
• afterbigin：子要素の先頭にHTMLを挿入
• beforeend：子要素の最後にHTMLを挿入
• afterend：要素の後にHTMLを挿入

let element2 = document.getElementById("animals");

element2.insertAdjacentHTML("beforebegin", "<p>動物の紹介です</p>");
element2.insertAdjacentHTML("afterend", "<p>ありがとうございました</p>");
element2.insertAdjacentHTML("afterbegin", "<li>馬</li>");
element2.insertAdjacentHTML("beforeend", "<li>鹿</li>");

動物の紹介です

• 馬
• 犬
• 猫
• 鳥
• パンダ
• 鹿

ありがとうございました

それぞれどこに挿入されたか確認しておいてください。

ノードをクローンする

cloneNode

「cloneNode」はノードのクローンを作成します。

let clone = element2.cloneNode(true);

element2.after(clone);

• 馬
• 犬
• 猫
• 鳥
• パンダ
• 鹿

• 馬
• 犬
• 猫
• 鳥
• パンダ
• 鹿

ここでは「true」を呼び出していますが、「false」にすると、子要素のないクローンが作成されます。

あとがき

とても沢山のメソッドをご紹介させて頂きました。

これらをすべて覚えるのは不可能なので、実際に作業する時に覚えていくようにしましょう。

とりあえずは、それぞれのメソッドを見たら、何をするのかが分かるようになっていれば良いと思います。

今回も最後までお読み頂きありがとうございました。