Unsur DOM HTML HTML (nod)

Buat elemen HTML

var newEle =document.createElement(p);

Elemen yang dicipta dilampirkan pada elemen lain:

A. appendChild(B): Jika B ialah elemen yang baru dicipta, tambahkan elemen B pada penghujung semua elemen anak bagi elemen A.

Jika elemen sudah wujud dalam halaman B, kesan pernyataan ini ialah memindahkan elemen B ke elemen anak A.

appendChild() Fungsi ini mempunyai kesan yang serupa dengan atribut innerHTML Perbezaannya ialah:

1 innerHTML akan berjalan lebih perlahan daripada appendChild (mungkin kerana ia perlu dihuraikan)

<🎜. > 2 innerHTML lebih mudah daripada appendChild, sama seperti menulis rentetan

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

Contoh analisis:

Kod ini mencipta elemen

baharu:

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

Untuk menambah teks pada elemen

, anda mesti mencipta nod teks terlebih dahulu. Kod ini mencipta nod teks:

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

Kemudian anda perlu menambah

Elemen

menambahkan nod teks ini:

para.appendChild(node);

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

Kod ini mencari elemen sedia ada:

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

Kod berikut sudah pun Tambah baharu elemen selepas elemen sedia ada:

element.appendChild(para);

Alih keluar elemen HTML

Fungsi removechild boleh memadamkan elemen anak yang ditentukan bagi elemen induk.

Jika fungsi ini berjaya memadamkan nod anak, ia mengembalikan nod yang dipadamkan, jika tidak ia mengembalikan nod.

Struktur sintaks:

fatherObj.removeChild(childrenObj)

Penjelasan parameter:

1.fatherObj: Objek elemen elemen anak yang akan dipadamkan .

2.childrenObj: Objek elemen kanak-kanak untuk dipadamkan.

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

Contoh analisis

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

rreee

Cari elemen dengan id="div1":

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

Cari
< dengan id="p1 " 🎜>Elemen:

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

Alih keluar elemen anak daripada elemen induk:

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

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script> //显示用户信息 function ShowData() { var userList = GetUserList(); var tabUser = document.getElementById("tabUser"); for (var i = 0; i < userList.length; i++) { var tr = document.createElement("tr"); var td1 = document.createElement("td"); var td2 = document.createElement("td"); td1.innerHTML = userList[i].UserId; td2.innerHTML = userList[i].UserName; tr.appendChild(td1); tr.appendChild(td2); tabUser.appendChild(tr); } } //清空用户信息 function RemoveData() { var tabUser = document.getElementById("tabUser"); for (var i = tabUser.childNodes.length - 1; i >= 0; i--) { tabUser.removeChild(tabUser.childNodes[i]); } } //获取用户列表 function GetUserList() { var userList = []; var user1 = { UserId: 1, UserName: "Kevin" }; var user2 = { UserId: 2, UserName: "Joins" }; userList.push(user1); userList.push(user2); return userList; } </script> </head> <body> <table id="tabUser" border="1"></table> <input type="button" id="btnShowData" onclick="ShowData()" value="显示数据" /> <input type="button" id="btnRemoveData" onclick="RemoveData()" value="清空数据" /> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

Unsur DOM HTML HTML (nod)

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]