บทความนี้อธิบายวิธีการสร้างและลบองค์ประกอบแบบไดนามิกใน JavaScript แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
ใน DOM เราสามารถลบองค์ประกอบ DOM ได้อย่างง่ายดายและรวดเร็วแบบไดนามิก ที่นี่เราจะให้คำแนะนำสั้น ๆ แก่คุณ
ตัวอย่างที่ 1:
สร้างปุ่มแบบไดนามิก
คัดลอกรหัสดังนี้: <html>
<head>
<title> ปุ่มสร้างแบบไดนามิก </title>
<ภาษาสคริปต์ = "JavaScript">
var a, b, ab, ba, c;
ฟังก์ชั่น createInputa () {
a = document.createElement ("อินพุต"); // ใช้วิธีการสร้างองค์ประกอบของ DOM
A.Type = "ปุ่ม"; // ตั้งค่าประเภทขององค์ประกอบ
A.value = "ปุ่ม A"; // ตั้งค่าขององค์ประกอบ
a.attachevent ("onclick", addInputB); // เพิ่มกิจกรรมสำหรับการควบคุม
document.body.appendchild (a); // เพิ่มการควบคุมในแบบฟอร์ม
// a = null; // ปล่อยวัตถุ
-
ตัวอย่างที่ 2:
คัดลอกรหัสดังนี้: <html>
<head>
<script type = "text/javascript">
ฟังก์ชั่นทดสอบ () {
// createElement () สร้างองค์ประกอบที่ระบุชื่อฉลาก [เช่น: สร้างไฮเปอร์ลิงก์แบบไดนามิก]
var createA = document.createElement ("A");
createa.id = "a1";
createa.innerText = "เชื่อมต่อกับ baidu";
createa.href = "// www.vevb.com";
//createa.color="Green "//// เพิ่มสี (อย่าลืมแอตทริบิวต์สไตล์มิฉะนั้นจะไม่มีผล)
createa.style.color = "สีเขียว"
// เพิ่มตำแหน่งเริ่มต้น -ร่างกายและเพิ่มโหนดลูก
//document.body.appendchild(Createa);
// วางตำแหน่งที่ระบุ
document.getElementById ("div1"). AppendChild (CreateA);
-
ฟังก์ชั่น test2 () {
// ลบโหนดไปที่ RemoveChild () ที่ตำแหน่งที่ระบุ
document.getElementById ("div1"). RemoveChild (document.getElementById ("A1")); // ชื่อ id ซ้ำ js เพื่อรับชื่อแรกเท่านั้น
-
</script>
</head>
<body>
<!-การสร้างองค์ประกอบแบบไดนามิก->
<อินพุต type = "button" value = "สร้างแท็ก" onclick = "test ()"/> <br/>
<อินพุต type = "button" value = "ลบเพื่อสร้างแท็ก" onclick = "test2 ()"/>
<div id = "div1">
</div>
</body>
</html>
สร้างหลายรูปแบบแบบไดนามิก:
คัดลอกรหัสดังนี้: <html>
<head>
<script type = "text/javascript">
window.onload = function () {
var abtn = document.createElement ("อินพุต");
var bbtn = document.createelement ("อินพุต");
var cbtn = document.createelement ("อินพุต");
abtn.type = "ปุ่ม";
abtn.value = "ปุ่ม A";
abtn.onclick = copybtn;
bbtn.type = "ปุ่ม";
bbtn.value = "ปุ่ม b";
bbtn.onclick = copybtn;
cbtn.type = "ปุ่ม";
cbtn.value = "ปุ่ม c";
cbtn.onclick = clearcopybtn;
document.body.appendchild (abtn);
document.body.appendchild (BBTN);
document.body.appendchild (CBTN);
-
ฟังก์ชั่น copybtn () {
var btn = document.createElement ("อินพุต");
btn.type = "ปุ่ม";
btn.value = this.value;
btn.iscopy = true;
btn.onclick = copybtn;
document.body.appendchild (BTN);
-
ฟังก์ชั่น clearcopybtn () {
var btns = document.getElementsByTagname ("อินพุต");
ความยาว var = btns.length;
สำหรับ (var i = length-1; i> = 0; i--) {
ถ้า (btns [i]. iscopy) {
document.body.removechild (btns [i]);
-
-
-
</script>
</head>
<body>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน