DOM 要素


新しい HTML 要素を作成する

新しい HTML 要素を作成する

HTML DOM に新しい要素を追加するには、まず要素 (要素ノード) を作成し、次にその要素を既存の要素に追加する必要があります。


インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
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);

最後に、新しい要素を既存の要素に追加する必要があります。
このコードは既存の要素を検索します:

変数 element=document.getElementById("div1");

次のコードは、既存の要素の後に新しい要素を追加します。 element.appendChild(para);

既存の HTML 要素を削除します
次のコードは、要素を削除する方法を示しています:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<div id="div1">
	<p id="p1">这是一个段落。</p>
	<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックして、オンライン例を見る

分析例

この HTML ドキュメントには、2 つの子ノード (2 つの <p> 要素) を持つ <div> 要素が含まれています。 p id="p1">これは段落です。 </p>

<p id="p2">これは別の段落です。 </p>
</div>

id="div1" の要素を検索します:

varparent=document.getElementById("div1");


id="p1" の要素を検索します。 " p> 要素:
var child=document.getElementById("p1");

親要素から子要素を削除:
parent.removeChild(child);


lamp 親要素を参照せずに要素を削除できれば便利です。
でも残念です。 DOM は、削除する必要がある要素とその親要素を認識している必要があります。

これは一般的な解決策です: 削除したい子要素を見つけて、そのparentNodeプロパティを使用して親要素を見つけます:

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

HTML DOM チュートリアル

JavaScript チュートリアルの HTML DOM セクションでは、次のことを学習しました:

  • HTML 要素のコンテンツを変更する方法 (innerHTML)

  • HTML 要素のスタイルを変更する方法 (CSS)

  • HTML DOM イベントに反応する方法

  • HTML 要素を追加または削除する方法

JavaScript を使用した HTML DOM へのアクセスの詳細については、完全な HTML DOM チュートリアルを参照してください。