亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

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中文網(wǎng)(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中文網(wǎng)(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
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(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="顯示數(shù)據(jù)" /> <input type="button" id="btnRemoveData" onclick="RemoveData()" value="清空數(shù)據(jù)" /> </body> </html>