HTML DOM要素2024 年の最新の入門チュートリアル。このコースでは 新しいHTML要素を作成する - は、appendChild(),例,分析の例,新しいHTML要素を作成する - のinsertBefore(),例,既存のHTML要素を削除します,例,分析の例,HTML要素を交換してください,例, について学習できます。
HTML DOM要素
追加、削除、およびHTML要素を交換してください。
新しいHTML要素を作成する - は、appendChild()
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>要素にテキストノードを追加する必要があります。
最後に、既存の要素に、この新しい要素を追加する必要があります。
既存の要素にこのコードを探します:
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>
»をお試しください
分析の例
この文書では、との2つの子ノードの1(2つの<p>要素)で、HTMLの<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要素を交換してください
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>
»をお試しください