追加と削除ノード（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>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var
element = document.getElementById("div1");
element.appendChild(para);
</script> »それを自分で試してみてください 例の説明しました
このコードは、新しい作成します<p>要素を：
var para = document.createElement("p");
テキストを追加するには<p>要素には、最初にテキストノードを作成する必要があります。 このコードは、テキストノードを作成します。
var node = document.createTextNode("This is a new paragraph.");
次に、にテキストノードを追加する必要があります<p>要素：
para.appendChild(node);
最後に、既存の要素に新しい要素を追加する必要があります。
このコードは、既存の要素を検索します。
var
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>
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> »それを自分で試してみてください 既存のHTML要素を削除します
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> »それを自分で試してみてください メソッドnode.remove() DOM 4仕様で実装されています。
しかし悪いため、ブラウザのサポートのため、あなたはそれを使用しないでください。
例の説明しました
この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" ：
var parent = document.getElementById("div1");
<p>要素を探すid="p1" ：
var child = document.getElementById("p1");
親から子を削除します。
parent.removeChild(child);
親を参照することなく要素を削除できるようにするとよいでしょう。
しかし、申し訳ありません。 DOMは、削除する要素、およびその親の両方を知っている必要があります。
削除したい子を検索し、親を見つけるために、そのはparentNodeプロパティを使用します。ここでは一般的な回避策は次のとおりです。
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
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>
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> »それを自分で試してみてください