JavaScript アドバンス

DOM 要素（ノード）

1. ノード（HTML要素）の追加と削除

1.1 新しいHTML要素（ノード）の作成

HTML DOMに新しい要素を追加するには、まずその要素（要素ノード）を作成し、次に既存の要素にアペンド（追加）する必要があります。

コード例

<div id="div1">
  <p id="p1">これは段落です。</p>
  <p id="p2">これは別の段落です。</p>
</div>

<script>
// 新しい p 要素を作成
const para = document.createElement("p");
// テキストノードを作成
const node = document.createTextNode("これは新しく追加されたテキストです。");
// テキストノードを p 要素に追加
para.appendChild(node);

// 既存の要素（div1）を取得
const element = document.getElementById("div1");
// 新しい要素を既存の要素に追加
element.appendChild(para);
</script>

1.2 コードの解説

このスクリプトは、新しい <p> 要素を作成します：
createElement

<p> 要素にテキストを追加するには、まずテキストノードを作成する必要があります。以下のコードでテキストノードを作成しています：
createTextNode

次に、そのテキストノードを <p> 要素に追加します：
appendChild

最後に、新しい要素を既存の要素に追加します。
まず、既存の要素を特定します：
getElementById

そして、既存の要素に対して新しい要素をアペンドします：
appendChild

2. 新しいHTML要素の作成 - insertBefore()

前述の例で使用した appendChild() メソッドは、新しい要素を親要素の「最後の子」として追加します。
もし任意の場所に挿入したい場合は、 insertBefore() メソッドを使用します。

コード例

<div id="div1">
  <p id="p1">これは段落です。</p>
  <p id="p2">これは別の段落です。</p>
</div>

<script>
const para = document.createElement("p");
const node = document.createTextNode("これは前方に挿入された新しいテキストです。");
para.appendChild(node);

const element = document.getElementById("div1");
const child = document.getElementById("p1");
// p1 の前に para を挿入
element.insertBefore(para, child);
</script>

3. 既存のHTML要素の削除

HTML要素を削除するには、 remove() メソッドを使用します。

コード例

<div>
  <p id="p1">これは段落です。</p>
  <p id="p2">これは別の段落です。</p>
</div>

<script>
const elmnt = document.getElementById("p1");
// 要素自体を削除
elmnt.remove();
</script>

3.1 コードの解説

HTMLドキュメント内に、2つの子ノード（2つの <p> 要素）を持つ <div> 要素があります。
まず、削除したい要素を特定します：
getElementById

次に、その要素に対して remove() メソッドを実行します：
remove

       注意:remove() メソッドは古いブラウザ（Internet Explorerなど）では動作しません。その場合は、次に説明する removeChild() を使用してください。

4. 子ノードの削除

remove() メソッドをサポートしていないブラウザでは、親ノードを特定してから要素を削除する必要があります。

コード例

<div id="div1">
  <p id="p1">これは段落です。</p>
  <p id="p2">これは別の段落です。</p>
</div>

<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
// 親から子を指定して削除
parent.removeChild(child);
</script>

4.1 コードの解説

  1. id="div1" を持つ要素を特定します。
  2. id="p1" を持つ <p> 要素を特定します。
  3. 親からその子を削除（ removeChild ）します。

よく使われるテクニックとして、削除したい子要素から parentNode プロパティを使用して親を特定する方法があります：

const child = document.getElementById("p1");
child.parentNode.removeChild(child);

5. HTML要素の置換

HTML DOM内の要素を置き換えるには、 replaceChild() メソッドを使用します。

コード例

<div id="div1">
  <p id="p1">これは段落です。</p>
  <p id="p2">これは別の段落です。</p>
</div>

<script>
const para = document.createElement("p");
const node = document.createTextNode("これは置換後の新しいテキストです。");
para.appendChild(node);

const parent = document.getElementById("div1");
const child = document.getElementById("p1");
// 第1引数に新しいノード、第2引数に置換される古いノードを指定
parent.replaceChild(para, child);
</script>