HTML DOM要素
追加、削除、およびHTML要素を交換してください。
新しいHTML要素を作成する - は、appendChild（）
HTML DOMに新しい要素を追加するには、最初の要素を作成し、既存の要素に追加しなければなりません。
例
<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>要素を作成します。
<p>要素にテキストを追加するには、まずテキストノードを作成する必要があります。 このコードは、テキストノードを作成します。
その後、<p>要素にテキストノードを追加する必要があります。
最後に、既存の要素に、この新しい要素を追加する必要があります。
既存の要素にこのコードを探します：
既存の要素に新しい要素を追加するコード：
新しいHTML要素を作成する - のinsertBefore（）
appendChildの一例で（）メソッドは、親要素の最後の子要素として新しい要素が追加されます。
あなたはこれをしたくない場合は、のinsertBefore（）メソッドを使用することができます。
例
<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要素を削除するには、要素の親要素を知っている必要があります。
例
<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>
»をお試しください
分析の例
この文書では、との2つの子ノードの1（2つの<p>要素）で、HTMLの<div>要素が含まれています。
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
ID = "div1を"要素を検索します。
ID = "P1" <p>要素を探します：
親要素のサブ要素から削除します。
 | 私は親要素を指していない場合の要素を削除することはできますか？ 申し訳ありません。 DOMは、削除したい要素だけでなく、その親要素を理解する必要があります。 |
|---|
ここでは一般的な解決策である：あなたが削除してから、その親要素を見つけるためにはparentNode属性を使用する必要があるサブ要素を見つけること：
child.parentNode.removeChild(child);
HTML要素を交換してください
HTMLのDOM要素を交換するには、のreplaceChild（）メソッドを使用します。
例
<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>
»をお試しください