JavaScript HTML DOM エレメント（ノード）

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

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

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

例

<div id="div1">
<p id="p1">これは段落です。</p>
<p id="p2">これは別の段落です。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("これは新しいテキストです。");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>

自分で試してみる

例説明

このコードは新しい <p> 要素：

var para = document.createElement("p");

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

var node = document.createTextNode("これは新しい段落です。");

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

para.appendChild(node);

最後に、この新しい要素を既存の要素に追加する必要があります。

このコードは、既存の要素を見つけます：

var element = document.getElementById("div1");

このコードは、この既存の要素に新しい要素を追加します：

element.appendChild(para);

新しいHTML要素を作成 - insertBefore()

前の例では、 appendChild メソッドを使用して、新しい要素を追加できます。

これに加えて、以下の insertBefore() メソッド：

例

<div id="div1">
<p id="p1">これは段落です。</p>
<p id="p2">これは別の段落です。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("これは新しいテキストです。");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

自分で試してみる

既存のHTML要素を削除

HTML要素を削除するには、以下を使用してください： remove() メソッド：

例

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1"); elmnt.remove();
</script>

自分で試してみる

例説明

このHTMLドキュメントには、二つの子ノード（二つの <p> 要素）の <div> 要素：

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

削除する要素を見つけます：

const elmnt = document.getElementById("p1");

その後、この要素に対して remove() メソッド：

elmnt.remove();

注意：remove()メソッドは旧ブラウザでは動作しません。以下の例を参照して、以下のように使用する方法を学びます： removeChild()。

削除

削除子ノードをサポートしていない remove() この方法のブラウザでは、要素を削除するには親ノードを見つける必要があります：

例

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

自分で試してみる

例説明

このHTMLドキュメントには、二つの子ノード（二つの <p> 要素）の <div> 要素：

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

を見つけます： id="div1" の要素：

const parent = document.getElementById("div1");

を見つけます： id="p1" の <p> 要素：

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

親要素から子を削除する：

parent.removeChild(child);

これは一般的な解決策です：削除する子ノードを見つけ、その parentNode 属性找到父节点：

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

HTML 要素を置き換える

要素を置き換える場合は、以下を使用してください replaceChild() メソッド：

例

<div id="div1">
<p id="p1">これは段落です。</p>
<p id="p2">これは別の段落です。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("これは新しいテキストです。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

自分で試してみる