Latest web development tutorials

องค์ประกอบ DOM HTML

เพิ่มลบและแทนที่องค์ประกอบ HTML

สร้างองค์ประกอบ HTML ใหม่ - appendChild ()

เพื่อเพิ่มองค์ประกอบใหม่ใน DOM HTML คุณต้องสร้างองค์ประกอบและผนวกกับองค์ประกอบที่มีอยู่

ตัวอย่าง

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

ลอง»

ตัวอย่างของการวิเคราะห์

รหัสนี้สร้าง <p> องค์ประกอบใหม่:

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

เพื่อเพิ่มข้อความที่ <p> องค์ประกอบคุณต้องสร้างโหนดข้อความ รหัสนี้สร้างโหนดข้อความ:

var node=document.createTextNode("This is a new paragraph.");

แล้วคุณจะต้องผนวกโหนดข้อความที่ <p> องค์ประกอบ:

para.appendChild(node);

สุดท้ายคุณก็ต้องเพิ่มองค์ประกอบใหม่นี้เพื่อองค์ประกอบที่มีอยู่

ค้นหารหัสนี้จะเป็นองค์ประกอบที่มีอยู่:

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

รหัสการเพิ่มองค์ประกอบใหม่กับองค์ประกอบที่มีอยู่:

element.appendChild(para);

สร้างองค์ประกอบ HTML ใหม่ - insertBefore ()

ในหนึ่งในตัวอย่างของ appendChild () วิธีองค์ประกอบใหม่เป็นองค์ประกอบหลักขององค์ประกอบลูกสุดท้ายที่จะเพิ่ม

ถ้าคุณไม่อยากให้เรื่องนี้คุณสามารถใช้ insertBefore () วิธีการ:

ตัวอย่าง

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>

ลอง»

ลบองค์ประกอบ HTML ที่มีอยู่

ในการลบองค์ประกอบ HTML คุณต้องรู้ว่าองค์ประกอบหลักขององค์ประกอบ:

ตัวอย่าง

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>


ลอง»

ตัวอย่างของการวิเคราะห์

เอกสารนี้มี HTML <div> ในหนึ่งในสองโหนดลูก (สอง <p> องค์ประกอบ) กับ:

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

ค้นหา id = "div1" องค์ประกอบ:

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

ค้นหา id = "P1 ว่า" <p> องค์ประกอบ:

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

ลบออกจากองค์ประกอบหลักองค์ประกอบย่อย:

parent.removeChild(child);

โคมไฟ ฉันสามารถลบองค์ประกอบในกรณีที่ไม่ได้หมายถึงองค์ประกอบหลักอยู่แล้ว?
ขอโทษ DOM ต้องเข้าใจองค์ประกอบที่คุณต้องการลบเช่นเดียวกับองค์ประกอบหลักของมัน

นี่เป็นวิธีการแก้ปัญหาร่วมกันเพื่อหาองค์ประกอบย่อยที่คุณจำเป็นต้องเอาออกแล้วใช้แอตทริบิวต์ parentNode เพื่อหาองค์ประกอบหลักของมัน

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

เปลี่ยนองค์ประกอบ HTML

เพื่อแทนที่องค์ประกอบ DOM HTML ใช้ replaceChild () วิธีการ:

ตัวอย่าง

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>

ลอง»