ノード（HTML要素）の追加と削除
新しい要素をHTML DOMに追加するには、最初に要素（要素ノード）を作成し、それを既存の要素に追加（append）する必要があります。
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var
element = document.getElementById("div1");
element.appendChild(para);
</script>
Try it Yourself »
このコードは、新しい<p>要素を作成します：
var para = document.createElement("p");
<p>要素にテキストを追加するには、最初にテキストノードを作成する必要があります。 このコードは、テキストノードを作成します：
var node = document.createTextNode("This is a new paragraph.");
次に、<p>要素にテキストノードを追加しなければなりません：
para.appendChild(node);
最後に、新しい要素を既存の要素に追加（append）しなければなりません。
このコードは既存の要素を検索します：
var
element = document.getElementById("div1");
このコードは、新しい要素を既存の要素に追加します：
element.appendChild(para);
前の例のappendChild() メソッドは、親の最後の子として新しい要素を追加しました。
親の最初の子として追加する場合は、insertBefore() メソッドを使うことができます：
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
Try it Yourself »
HTML要素を削除するには、その要素の親を知っている必要があります：
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
Try it Yourself »
メソッド node.remove() は、DOM 4 仕様で実装されています。
しかし、ブラウザのサポートが不十分なため、使用しないようにしてください。
このHTML文書には、2つの子ノード（2つの<p>要素）を持つ<div>要素が含まれています：
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
id="div1" の要素を検索します：
var parent = document.getElementById("div1");
id="p1" の<p>要素を検索します：
var child = document.getElementById("p1");
親から子を削除します：
parent.removeChild(child);
親を参照せずに、要素を削除することができればうれしいでしょう。
しかし、申し訳ありません。 DOMは、削除したい要素とその親の両方を知っている必要があります。
一般的な回避策は次の通り：削除する子を検索し、parentNodeプロパティを使用して親を探します：
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
要素をHTML DOMに置換するには、replaceChild() メソッドを使用します：
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>
Try it Yourself »