JavaScript HTML DOM要素（ノード）
ノードの追加と削除（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>要素を作成します：
const para = document.createElement("p");
要素にテキストを追加するには、<p>最初にテキストノードを作成する必要があります。このコードはテキストノードを作成します：
const node = document.createTextNode("This is a new paragraph.");
<p>次に、要素にテキストノードを追加する必要があります。
para.appendChild(node);
最後に、新しい要素を既存の要素に追加する必要があります。
このコードは、既存の要素を検索します。
const element = document.getElementById("div1");
このコードは、新しい要素を既存の要素に追加します。
element.appendChild(para);
新しい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>
<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ドキュメントには、<div>2つの子ノード（2つの<p>
要素）を持つ要素が含まれています。
<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");
<p>次の要素を見つけますid="p1"：
const child = document.getElementById("p1");
親から子を削除します。
parent.removeChild(child);
一般的な回避策は次のとおりです。削除する子を見つけ、その
parentNodeプロパティを使用して親を見つけます。
const child = document.getElementById("p1");
child.parentNode.removeChild(child);
HTML要素の置き換え
要素をHTMLDOMに置き換えるには、次の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>