SECはJavaScriptをHTML DOM要素（ノード）を理解します

1、新しいHTML要素（ノード）を作成 - のappendChildを（）

その中の要素を作成するための新しいHTML要素（ノード）の必要性を作成し、既に存在する要素を追加します。

<DIV ID = "DIV1"> 
<P ID = "P1">この段落です。</ P> 
<P ID = "P2">これは、別の段落です。</ P> 
</ div> 
 
<SCRIPT> のvarパラ=のdocument.createElement（ "P" ）;
 VARノード= document.createTextNode（ "これは新しい段落です。" ）; 
para.appendChild（ノード）; VAR要素document.getElementById =（ "DIV1" ）; 
element.appendChildを（パラ）; </ SCRIPT>

分析例

次のコードは、要素を作成するために使用されます。

VaRのパラ= ドキュメント。createElement （"P" ）;

新しいテキストノード要素を作成します。

VAR ノード= ドキュメント。はcreateTextNode （"これは新しい段落です。" ）;

テキスト・ノードは、要素に追加されます。

パラ。appendChild （ノード）。

最後に、内の既存の要素でp要素を追加します。

既存の要素を検索：

var 要素= ドキュメント。getElementByIdを（"DIV1" ）;

内の既存の要素に追加します。

要素。appendChild （パラ）;

）（のinsertBefore - 2、新しいHTML要素（ノード）を作成します

我々が使用する上記の例最後に新しい要素を追加するために使用されるのappendChild（）メソッドを、。

私たちが先頭に新しい要素を追加する必要がある場合は、使用することができますのinsertBefore（）メソッドを：

<DIV ID = "DIV1"> 
<P ID = "P1">この段落です。</ P> 
<P ID = "P2">これは、別の段落です。</ P> 
</ div> 
 
<SCRIPT> のvarパラ=のdocument.createElement（ "P" ）;
 VARノード= document.createTextNode（ "これは新しい段落です。" ）; 
para.appendChild（ノード）; VAR要素document.getElementById =（ "DIV1" ）;
 VAR子供=のdocument.getElementById（ "P1" ）; 
element.insertBefore（パラ、子）; </ SCRIPT>

既存の要素を削除する3。

要素を削除するには、要素の親要素を知っている必要があります。

<DIV ID = "DIV1"> 
<P ID = "P1">この段落です。</ P> 
<P ID = "P2">これは、別の段落です。</ P> 
</ div> 
 
<SCRIPT> VARの親=のdocument.getElementById（ "DIV1" ）;
 VARの子供=のdocument.getElementById（ "P1" ）; 
parent.removeChild（子）; </ SCRIPT>

分析例

HTMLドキュメントの<div>要素には2つのつの子ノード（2つの要素）が含まれています。

<DIV ID = "DIV1" > <P ID = "P1"は> これは段落です。</ P> <P ID = "P2" > これは、別の段落です。</ P> </ div>

ID =「DIV1」の要素を検索します。

VaRの親= ドキュメント。getElementByIdを（"DIV1" ）;

要素のID = "P1" 検索：

VaRの子= ドキュメント。getElementByIdを（"P1" ）;

親ノード要素から子を削除します。

親。removeChild （子）。

注：あなたが親要素を参照することなく要素を削除することができれば、素晴らしいことです。しかし、残念ながら。DOMの必要性は、あなたが要素とその親要素を削除する必要があることに注意してくださいします。

次のコードは、その親要素を探し、その後、子要素（削除されたノードは親ノードを知っている必要があります）を削除するために探していることが知られている子です。

VaRの子=のdocument.getElementById（ "P1" ）; 
child.parentNode.removeChild（子）。

4、HTML要素を置き換える - のreplaceChild（）

私たちは、のreplaceChild（）メソッドを使用してHTML DOM内の要素を置き換えることができます。

<DIV ID = "DIV1"> 
<P ID = "P1">この段落です。</ P> 
<P ID = "P2">これは、別の段落です。</ P> 
</ div> 
 
<スクリプト> VARパラ=のdocument.createElement（ "P" ）;
 VARノード= document.createTextNode（ "これは新しい段落です。" ）; 
para.appendChild（ノード）; VARの親document.getElementById =（ "DIV1" ）;
 VAR子供=のdocument.getElementById（ "P1" ）; 
parent.replaceChild（パラ、子）; </ SCRIPT>