JavaScript HTML DOM 要素
新しい HTML 要素を作成する
新しい HTML 要素を作成する
HTML DOM に新しい要素を追加するには、まず要素 (要素ノード) を作成してから、それを既存の要素に追加する必要があります。この要素。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<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>
</body>
</html>分析例:
このコードは、新しい <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"); 次のコードは既存の要素の後に新しい要素を追加します:
既存の HTML 要素を削除します
このコードは、既存の要素に新しい要素を追加します:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<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>
</body>
</html>この HTML ドキュメントには、2 つの子ノード (2 つの <p> 要素) を持つ <div> 要素が含まれています :
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
要素を見つけますid="div1" の場合:
varparent=document.getElementById("div1");
id="p1" の <p> 要素を検索します:
var child=document. );
親要素から子要素を削除します:
parent.removeChild(child);
親要素を参照せずに要素を削除できる場合は、非常に良いです。
でも残念です。 DOM は、削除する必要がある要素とその親要素を認識している必要があります。
これは一般的な解決策です。削除したい子要素を見つけて、そのparentNodeプロパティを使用して親要素を見つけます:
var child=document.getElementById("p1");
child.parentNode.removeChild (子);
HTML DOM チュートリアル
JavaScript チュートリアルの HTML DOM セクションでは、次のことを学習しました:
HTML 要素のコンテンツを変更する方法 (innerHTML) HTML 要素のスタイルを変更する方法 (CSS) ) HTML DOM イベントに応答する方法 React で HTML 要素を追加または削除する方法
次のセクション