ผนวกคำจำกัดความเด็ก
appendChild(newChild: Node) : Node
ผนวกโหนดเข้ากับอาร์เรย์ childNodes สำหรับโหนด
รองรับ: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+
เพิ่มโหนดให้กับอาร์เรย์โหนดย่อยของโหนดที่ระบุ ดูเหมือนจะสับสนเล็กน้อยในการอ่าน มันหมายถึงการเพิ่มองค์ประกอบให้กับโหนดที่ระบุ
ผนวกการใช้งานเด็ก
target.appendChild (เด็กใหม่)
newChild ถูกแทรกเป็นโหนดลูกของเป้าหมายหลังจากโหนดลูกสุดท้าย
ผนวกตัวอย่างเด็ก
var newElement = document.Document.createElement('ฉลาก');
newElement.Element.setAttribute('value', 'ชื่อผู้ใช้:');
var usernameText = document.Document.getElementById('ชื่อผู้ใช้');
ชื่อผู้ใช้Text.appendChild(องค์ประกอบใหม่);
แทรกก่อนกำหนด
insertBefore() วิธีการแทรกโหนดลูกใหม่ก่อนโหนดลูกที่มีอยู่
ฟังก์ชั่นของ insertBefore() วิธีการคือการแทรกโหนดลูกใหม่ก่อนโหนดลูกที่มีอยู่
แทรกก่อนการใช้งาน
target.insertBefore (เด็กใหม่ เด็กที่มีอยู่)
newChild ถูกแทรกเป็นโหนดย่อยของเป้าหมายก่อนโหนดที่มีอยู่
existingChild เป็นพารามิเตอร์ทางเลือก เมื่อเป็น null เอฟเฟกต์จะเหมือนกับ appendChild
แทรกก่อนตัวอย่าง
var oTest = document.getElementById("ทดสอบ");
var newNode = document.createElement("p");
newNode.innerHTML = "นี่คือการทดสอบ";
oTest.insertBefore (โหนดใหม่, oTest.childNodes [0]);
เอาล่ะ ถ้ามี insertBefore ก็ควรมี insertAfter ด้วยใช่ไหม?
เอาล่ะ มาเขียนตัวอย่างโดยใช้ Aptana กัน แต่ข้อความแจ้งอัจฉริยะของ Aptana บอกฉันว่าไม่มีวิธี insertAfter
จากนั้นให้นิยาม Luo ด้วยตัวเอง :)
insertAfter คำจำกัดความ
ฟังก์ชั่น insertAfter (newEl, targetEl)
-
var parentEl = targetEl.parentNode;
ถ้า (parentEl.lastChild == targetEl)
-
parentEl.appendChild (ใหม่ El);
}อื่น
-
parentEl.insertBefore (ใหม่ El, targetEl.nextSibling);
-
-
insertAfter การใช้งานและตัวอย่าง
var txtName = document.getElementById("txtName");
var htmlSpan = document.createElement("ช่วง");
htmlSpan.innerHTML = "นี่คือการทดสอบ";
insertAfter(htmlSpan,txtName);
แทรก htmlSpan เป็นโหนดพี่น้องของ txtName หลังโหนด txtName
สรุป:
1. appendChild และ insertBefore ถูกใช้เป็นวิธีการสำหรับโหนด ในขณะที่ insertAfter เป็นเพียงฟังก์ชันที่กำหนดเอง
2. เมื่อเปรียบเทียบกับ appendChild แล้ว insertBefore จะมีความยืดหยุ่นมากกว่าและสามารถแทรกโหนดใหม่ลงในตำแหน่งใดก็ได้ในอาร์เรย์โหนดย่อยของโหนดเป้าหมาย
3. ใช้ appendChild และ insertBefore เพื่อแทรกโหนดใหม่ สถานที่ตั้งคือโหนดพี่น้องจะต้องมีโหนดหลักร่วมกัน