ノードの追加と削除 (HTML 要素)
新しい HTML 要素 (ノード) の作成
HTML DOM に新しい要素を追加するには、最初に要素 (要素ノード) を作成してから、既存の要素に追加する必要があります。
例
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>
自分で試してみる »
例の説明
このコードは、新しい<p>エレメント：
<div>const para = document.createElement("p");</div>
にテキストを追加するには<p>エレメントを使用するには、最初にテキスト ノードを作成する必要があります。このコードは、テキスト ノードを作成します。
<div>const node = document.createTextNode("This is a new paragraph.");</div>
次に、テキスト ノードを<p>エレメント：
<div>para.appendChild(node);</div>
最後に、新しい要素を既存の要素に追加する必要があります。
このコードは、既存の要素を見つけます。
<div>const element = document.getElementById("div1");</div>
このコードは、新しい要素を既存の要素に追加します。
<div> element.appendChild(para);</div>
新しい HTML 要素の作成 - insertBefore()
のappendChild()前の例のメソッドでは、新しい要素を親の最後の子として追加しました。
使用したくない場合は、insertBefore()方法：
例
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
const 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 ドキュメントには<div>2 つの子ノードを持つ要素 (2<p>要素):
<div><div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div></div>
削除する要素を見つけます。
<div>const elmnt = document.getElementById("p1");</div>
次に、その要素に対して remove() メソッドを実行します。
<div>elmnt.remove();</div>
の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 ドキュメントには、<div>2 つの子ノードを持つ要素 (2<p>要素):
<div><div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div></div>
で要素を見つけますid="div1":
<div>const parent = document.getElementById("div1");</div>
を見つける<p>要素id="p1":
<div>const child = document.getElementById("p1");</div>
親から子を削除します。
<div>parent.removeChild(child);</div>
一般的な回避策は次のとおりです。削除する子を見つけて、その子を使用します。parentNode親を見つけるためのプロパティ:
<div>const child = document.getElementById("p1");
child.parentNode.removeChild(child);</div>
HTML 要素の置換
要素を HTML DOM に置き換えるには、replaceChild()方法：
例
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>
自分で試してみる »
