ความแตกต่างระหว่าง innerHTML และ textContent

บทความนี้สอนเรื่องความแตกต่างระหว่าง innerHTML และ textContent โดยแตกต่างกันตรงที่ innerHTML สามารถแสดงข้อมูลโดยการใส่แท็ก HTML ได้ ส่วน textContent แสดงได้แต่ข้อความ รันแท็ก HTML ไม่ได้ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง การใช้คำสั่ง innerHTML

<div id="text"></div>
<script>
    window.onload = (event) => {
        document.getElementById("text").innerHTML = "สวัสดี <b>Devdit</b>";
    };    
</script>

ตัวอย่าง การใช้คำสั่ง textContent

<div id="text"></div>
<script>
    window.onload = (event) => {
        document.getElementById("text").textContent = "สวัสดี Devdit";
    };    
</script>

1. ใช้คำสั่ง innerHTML สำหรับต้องการใส่แท็ก HTML ลงในข้อมูลที่ต้องการแสดงผล

2. ใช้คำสั่ง textContent สำหรับแสดงข้อความอย่างเดียว โดยไม่ต้องการประมวลผลแท็ก HTML