การเปลี่ยนข้อความและเนื้อหา HTML
อัปเดตเนื้อหาด้วย textContent และ innerHTML
การเปลี่ยนข้อความและเนื้อหา HTML เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
การอ่านและเขียนข้อความ
หากต้องการเปลี่ยนสิ่งที่องค์ประกอบแสดง คุณสามารถกำหนดข้อความหรือ HTML ให้กับองค์ประกอบได้ ทางเลือกที่เหมาะสมขึ้นอยู่กับว่าคุณต้องใช้มาร์กอัปหรือไม่ และข้อมูลนั้นน่าเชื่อถือเพียงใด
textContent
textContent ใช้อ่านหรือกำหนดข้อความดิบขององค์ประกอบ การกำหนดค่าจะลบองค์ประกอบลูกทั้งหมดแล้วแทนที่ด้วยโหนดข้อความเดียว และถือว่าอินพุตเป็นข้อความธรรมดา
const el = document.querySelector("#status");
el.textContent = "Saved!";textContent ทำให้มาร์กอัปเป็นข้อความธรรมดา
เนื่องจากเป็นข้อความธรรมดา HTML ใด ๆ ในสตริงจะแสดงตามตัวอักษรโดยไม่ถูกแยกวิเคราะห์ จึงช่วยป้องกันการแทรกโค้ดได้
el.textContent = "<b>hi</b>";
// displays the literal characters <b>hi</b>innerHTML
innerHTML ใช้อ่านหรือกำหนดมาร์กอัป HTML ภายในองค์ประกอบ การกำหนดค่าจะแยกวิเคราะห์สตริงเป็น HTML และสร้างโหนดจริงขึ้นมา
const box = document.querySelector("#box");
box.innerHTML = "<strong>Done</strong>";innerHTML แทนที่ทุกอย่าง
การกำหนดค่าให้ innerHTML จะทิ้งองค์ประกอบลูกที่มีอยู่ แล้วสร้างโครงสร้างย่อยขึ้นใหม่จากมาร์กอัปชุดใหม่
box.innerHTML = "<ul><li>One</li><li>Two</li></ul>";อันตรายจาก XSS
อย่านำอินพุตจากผู้ใช้ที่ไม่น่าเชื่อถือไปใส่ใน innerHTML เด็ดขาด สตริงอันตรายอาจแทรกสคริปต์หรือตัวจัดการเหตุการณ์ได้ ซึ่งเป็นช่องโหว่ที่เรียกว่า XSS
const userInput = getInput();
// DANGEROUS:
// box.innerHTML = userInput;
// SAFE:
box.textContent = userInput;innerText
innerText คล้ายกับ textContent แต่รับรู้รูปแบบการแสดงผล โดยสะท้อนข้อความที่แสดงผลจริงและไม่รวมองค์ประกอบที่ซ่อนอยู่
console.log(el.innerText); // visible text onlytextContent เทียบกับ innerText
textContent ส่งคืนข้อความทั้งหมด รวมถึงเนื้อหาที่ซ่อนอยู่ และทำงานเร็วกว่าเพราะไม่ทำให้เกิดการคำนวณเค้าโครง ส่วน innerText รับรู้เค้าโครงและทำงานช้ากว่า
el.textContent; // all text, even display:none
el.innerText; // only what is visually renderedการต่อข้อความอย่างปลอดภัย
หากต้องการเพิ่มข้อความโดยไม่ลบโหนดที่มีอยู่ ให้สร้างโหนดข้อความหรือใช้ insertAdjacentText แทนการเขียนทับ textContent
el.append(document.createTextNode(" extra"));
el.insertAdjacentText("beforeend", " more");การแทรก HTML โดยไม่แยกวิเคราะห์ใหม่
insertAdjacentHTML เพิ่มมาร์กอัปที่ตำแหน่งหนึ่งโดยไม่ต้องแยกวิเคราะห์องค์ประกอบทั้งหมดใหม่ จึงมีประสิทธิภาพมากกว่าการสร้าง innerHTML ขึ้นใหม่
box.insertAdjacentHTML("beforeend", "<li>New item</li>");การเลือกคุณสมบัติที่เหมาะสม
ใช้ textContent สำหรับข้อความธรรมดา ซึ่งเป็นค่าเริ่มต้นที่ปลอดภัย ใช้ innerHTML เฉพาะกับมาร์กอัปที่เชื่อถือได้ และใช้ innerText เมื่อต้องการข้อความที่แสดงผลและมองเห็นได้โดยเฉพาะ
ตรวจสอบความเข้าใจอย่างรวดเร็ว
เลือกแนวทางที่ปลอดภัย
ทบทวน
textContent กำหนดข้อความธรรมดาที่มีการหลีกอักขระ และเป็นค่าเริ่มต้นที่ปลอดภัย innerHTML แยกวิเคราะห์มาร์กอัป แต่เสี่ยงต่อ XSS เมื่อใช้อินพุตที่ไม่น่าเชื่อถือ innerText สะท้อนเฉพาะข้อความที่มองเห็นและแสดงผลจริง เมื่อต้องการเพิ่มเนื้อหา ควรเลือกใช้ insertAdjacentHTML/insertAdjacentText แทนการเขียนทับองค์ประกอบทั้งหมด
คำถามที่พบบ่อย
บทเรียน “การเปลี่ยนข้อความและเนื้อหา HTML” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การเปลี่ยนข้อความและเนื้อหา HTML” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การเปลี่ยนข้อความและเนื้อหา HTML”
อัปเดตเนื้อหาด้วย textContent และ innerHTML คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การเปลี่ยนข้อความและเนื้อหา HTML” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การเปลี่ยนข้อความและเนื้อหา HTML
- การสร้างและแทรกองค์ประกอบ
- การแก้ไขแอตทริบิวต์และคลาส
- การลบและแทนที่โหนด