textContent กับ innerHTML

เปลี่ยนข้อความอย่างปลอดภัยก่อน

textContent ใส่เป็นข้อความล้วน — ไม่ตีความเป็นแท็ก HTML

innerHTML ตีความเป็น HTML — อันตรายถ้ามีข้อความจากผู้ใช้หรือ API ที่ไม่ไว้ใจ

const out = document.querySelector("#out");

// ปลอดภัยสำหรับข้อความทั่วไป
out.textContent = "สวัสดี <strong>Mim</strong>";
// ผู้ใช้เห็นเครื่องหมายแท็กเป็นตัวอักษร ไม่กลายเป็นตัวหนา

// ระวัง: ใช้เมื่อคุณควบคุม HTML เองจริง ๆ
// out.innerHTML = "<strong>Mim</strong>";
เทคนิคคอร์สนี้: ค่าเริ่มต้นใช้ textContent · ใช้ innerHTML เฉพาะเมื่อจำเป็นและแหล่งที่มาเชื่อถือได้