เมื่อแอปพลิเคชันของคุณต้องการพึ่งพาไลบรารีคลาส JavaScript ที่เฉพาะเจาะจงคุณจะพยายามแก้ปัญหาของไลบรารีคลาสเองโดยไม่ได้ตั้งใจมากกว่าปัญหาทางภาษา ตัวอย่างเช่นเมื่อฉันพยายามห่อข้อความ (ซึ่งอาจมีองค์ประกอบ HTML) ด้วยองค์ประกอบ DIV สมมติว่ามี html ต่อไปนี้:
นี่คือข้อความบางส่วนและ <a href = ""> ลิงค์ </a>
ในเวลานี้หากคุณต้องการแปลงเป็นสิ่งต่อไปนี้:
<div> นี่คือข้อความบางส่วนและ <a href = ""> ลิงค์ </a> <div>
วิธีที่ง่ายที่สุดในการใช้กำลังเดรัจฉานคือคุณสามารถทำการอัปเดตองค์ประกอบหลักผ่านคุณสมบัติ. innerhtml แต่ปัญหาคือการฟังเหตุการณ์ที่ถูกผูกไว้ทั้งหมดจะไม่ถูกต้องเนื่องจากองค์ประกอบ HTML จะถูกสร้างขึ้นใหม่เมื่อใช้ InnerHtml นี่เป็นแก้วใหญ่! ดังนั้นในเวลานี้คุณสามารถใช้ JavaScript เพื่อให้ได้มัน - มีข้อบกพร่องและข้อบกพร่อง นี่คือรหัสการใช้งาน:
var newWrapper = document.createElement ('div'); ในขณะที่ (มีอยู่จริง. firstchild) {// ย้ายองค์ประกอบ DOM, newWrapper.AppendChild (มีอยู่ PARENT.FIRSTCHILD); -คุณไม่สามารถใช้การวนรอบที่นี่ได้เนื่องจาก ChildNodes เป็นชุดของโหนดไดนามิกและตราบใดที่คุณย้ายโหนดมันจะส่งผลกระทบต่อค่าดัชนีดัชนี เราใช้ลูปสักครู่เพื่อตรวจจับ FirstChild ขององค์ประกอบหลัก หากส่งคืนค่าที่เป็นตัวแทนของเท็จคุณจะรู้ว่าโหนดทั้งหมดถูกย้ายไปยังผู้ปกครองใหม่!