การสร้างและแทรกองค์ประกอบ
สร้างโหนดใหม่ด้วย createElement และผนวกโหนด
การสร้างและแทรกองค์ประกอบ เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
การสร้างองค์ประกอบใหม่
แทนที่จะเขียนสตริง HTML คุณสามารถสร้างองค์ประกอบด้วยโค้ดได้ วิธีนี้ช่วยหลีกเลี่ยง XSS และทำให้คุณมีการอ้างอิงถึงองค์ประกอบจริงเพื่อกำหนดค่า
createElement
document.createElement สร้างองค์ประกอบใหม่ที่ยังไม่ได้เชื่อมต่อกับเอกสาร องค์ประกอบนี้มีอยู่ในหน่วยความจำ แต่ยังไม่อยู่ในหน้าเว็บ
const li = document.createElement("li");
li.textContent = "New item";การตั้งค่าก่อนแทรก
กำหนดคลาส แอตทริบิวต์ และเนื้อหาในขณะที่องค์ประกอบยังไม่ได้เชื่อมต่อกับ DOM องค์ประกอบนั้นจะมองเห็นได้ก็ต่อเมื่อคุณแทรกเข้าไปแล้ว
const btn = document.createElement("button");
btn.textContent = "Save";
btn.className = "primary";append
append เพิ่มโหนด (หรือสตริง) เป็นโหนดลูก ลำดับสุดท้าย ขององค์ประกอบ และรับอาร์กิวเมนต์ได้หลายตัว
const list = document.querySelector("ul");
list.append(li);prepend
prepend แทรกโหนดเป็นโหนดลูก ลำดับแรก ทำให้โหนดลูกที่มีอยู่เลื่อนลงมา
list.prepend(document.createElement("li"));append รองรับสตริง
ต่างจาก appendChild รุ่นเก่า ตรงที่ append รับสตริงทั่วไปและอาร์กิวเมนต์หลายตัวพร้อมกันได้
const p = document.createElement("p");
p.append("Hello, ", document.createElement("br"), "World");appendChild
appendChild เป็นเมธอดแบบดั้งเดิม โดยรับโหนดได้เพียงหนึ่งโหนดและคืนค่าโหนดนั้น ส่วน append จะคืนค่าเป็น undefined
const node = list.appendChild(document.createElement("li"));insertBefore
insertBefore วางโหนดใหม่ไว้ก่อนโหนดลูกที่มีอยู่ตามที่ระบุ ทำให้กำหนดตำแหน่งได้อย่างแม่นยำ
const ref = list.children[1];
list.insertBefore(li, ref);insertAdjacentElement
insertAdjacentElement แทรกองค์ประกอบโดยอ้างอิงตำแหน่งสัมพัทธ์ เช่น ก่อนเริ่มต้น หลังเริ่มต้น ก่อนสิ้นสุด และหลังสิ้นสุด
ref.insertAdjacentElement("beforebegin", li);DocumentFragment สำหรับการเพิ่มเป็นชุด
เมื่อต้องเพิ่มองค์ประกอบจำนวนมาก ให้สร้างองค์ประกอบเหล่านั้นใน DocumentFragment ก่อน แล้วจึงแทรกเพียงครั้งเดียว วิธีนี้ช่วยลดการคำนวณการจัดวางใหม่และทำงานได้เร็วขึ้น
const frag = document.createDocumentFragment();
for (let i = 0; i < 3; i++) {
const item = document.createElement("li");
item.textContent = "Row " + i;
frag.append(item);
}
list.append(frag);cloneNode
cloneNode(true) คัดลอกองค์ประกอบและองค์ประกอบลูกหลานของมัน เหมาะสำหรับการสร้างโครงสร้างซ้ำจากแม่แบบ
const copy = li.cloneNode(true);
list.append(copy);ตรวจสอบความเข้าใจ
เลือกเทคนิคที่ดีที่สุด
สรุปทบทวน
ใช้ createElement เพื่อสร้างองค์ประกอบที่ยังไม่ได้เชื่อมต่อ จากนั้นกำหนดค่าแล้วแทรกด้วย append/prepend (รองรับสตริงและอาร์กิวเมนต์หลายตัว), appendChild (รับโหนดเดียว) หรือ insertBefore/insertAdjacentElement เมื่อต้องการกำหนดตำแหน่งอย่างแม่นยำ หากต้องแทรกหลายรายการเป็นชุด ให้ใช้ DocumentFragment และนำโครงสร้างกลับมาใช้ซ้ำด้วย cloneNode(true)
คำถามที่พบบ่อย
บทเรียน “การสร้างและแทรกองค์ประกอบ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การสร้างและแทรกองค์ประกอบ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การสร้างและแทรกองค์ประกอบ”
สร้างโหนดใหม่ด้วย createElement และผนวกโหนด คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การสร้างและแทรกองค์ประกอบ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การเปลี่ยนข้อความและเนื้อหา HTML
- การสร้างและแทรกองค์ประกอบ
- การแก้ไขแอตทริบิวต์และคลาส
- การลบและแทนที่โหนด