elemen DOM


Buat elemen HTML baharu

Buat elemen HTML baharu

Untuk menambah elemen baharu pada DOM HTML, anda mesti mencipta elemen (nod elemen terlebih dahulu ), dan kemudian menambahkan elemen pada elemen sedia ada.


Instance

<!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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Contoh analisis:

Kod ini mencipta elemen <p> baharu:

var para=document.createElement (" p");

Untuk menambah teks pada <p> anda mesti membuat nod teks terlebih dahulu. Kod ini mencipta nod teks:

var node=document.createTextNode("Ini adalah perenggan baharu.");

Kemudian anda perlu < ; elemen menambahkan nod teks ini:

para.appendChild(node);

Akhir sekali anda mesti menambahkan elemen baharu pada elemen sedia ada.

Kod ini mencari elemen sedia ada:

var element=document.getElementById("div1");

Kod berikut menambah elemen baharu selepas elemen sedia ada:

element.appendChild(para);

Padam elemen HTML sedia ada

Kod berikut menunjukkan cara memadam elemen:

Instance

<!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>

Run instance»

Klik butang "Run instance" untuk melihat instance dalam talian

Analisis instance

Dokumen HTML ini mengandungi elemen <div> dengan dua nod anak (dua <p> elemen):

<div id="div1">
<p id="p1">Ini ialah perenggan. </p>
<p id="p2">Ini adalah perenggan lain. </p>
</div>

Cari elemen dengan id="div1":

var parent=document.getElementById("div1 " );

Cari elemen <p> dengan id="p1":

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

Alih keluar elemen anak daripada unsur ibu bapa:

ibu bapa.removeChild(anak);

lampAlangkah baiknya jika anda boleh memadamkan elemen tanpa merujuk elemen induk. baiklah.
lamp如果能够在不引用父元素的情况下删除某个元素，就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。
Tetapi sayang sekali. DOM perlu mengetahui elemen yang anda perlu padamkan dan elemen induknya.

Ini ialah penyelesaian biasa: cari elemen anak yang ingin anda alih keluar dan kemudian gunakan sifat parentNodenya untuk mencari elemen induk:

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

Tutorial HTML DOM

Dalam kami Dalam bahagian HTML DOM tutorial JavaScript, anda telah mempelajari:

  • Cara menukar kandungan elemen HTML (innerHTML)

  • Bagaimana untuk menukar Gaya elemen HTML (CSS)

  • Cara bertindak balas terhadap peristiwa HTML DOM

  • Cara menambah atau mengalih keluar elemen HTML

Jika anda ingin mengetahui lebih lanjut tentang mengakses DOM HTML menggunakan JavaScript, lawati tutorial HTML DOM lengkap kami.