JavaScriptをHTML DOM要素
新しいHTML要素を作成します。
新しいHTML要素を作成します。
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");
element.appendChildを(パラ);
</スクリプト>
<Pのid = "p1が">これは段落です。 </ P>
<P idは= "p2の">これは別の段落です。 </ P>
</ DIV>
<スクリプト>
varパラ=のdocument.createElement( "P");
varの各ノード= document.createTextNode( "これは新しい段落です。");
para.appendChild(ノード)。
var要素=のdocument.getElementById( "DIV1");
element.appendChildを(パラ);
</スクリプト>
»をお試しください
分析の例:
このコードは、新しい<p>要素を作成します。
var para=document.createElement("p");
<p>要素にテキストを追加するには、まずテキストノードを作成する必要があります。 このコードは、テキストノードを作成します。
varの各ノード= document.createTextNode( "これは新しい段落です。");
その後、<p>要素には、このテキストノードを追加する必要があります。
para.appendChild(ノード)。
最後に、既存の要素に、この新しい要素を追加する必要があります。
既存の要素を見つけるためのコード:
var要素=のdocument.getElementById( "DIV1");
既存の要素の後に次のコードでは、新しい要素を追加します。
element.appendChildを(パラ);
既存のHTML要素を削除します
次のコードは、要素を削除する方法を示しています。
例
<DIVのID = "DIV1">
<Pのid = "p1が">これは段落です。 </ P>
<P idは= "p2の">これは別の段落です。 </ P>
</ DIV>
<Pのid = "p1が">これは段落です。 </ P>
<P idは= "p2の">これは別の段落です。 </ P>
</ DIV>
<スクリプト>
VARの親=のdocument.getElementById( "DIV1");
VARの子=のdocument.getElementById( "P1");
parent.removeChild(子)。
</スクリプト>
»をお試しください
分析の例
<div>要素の子ノードが2つ(2つの<p>要素)を持っ含むHTML文書:
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
ID = "div1を"要素を検索します。
VARの親=の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);
child.parentNode.removeChild(child);
HTML DOMチュートリアル
私たちのJavaScriptのチュートリアルのHTML DOMの一部では、あなたが学びました:
- HTML要素(innerHTMLプロパティ)の内容を変更する方法
- HTML要素(CSS)のスタイルを変更する方法
- HTML DOMのイベントに反応する方法
- どのように私は、HTML要素を追加または削除しますか
あなたがHTML DOMの知識にアクセスするにはJavaScriptを使用してについての詳細を知りたい場合は、当社の完全ご覧くださいHTML DOMチュートリアルを 。