HTML DOM innerText Property - อ่าน/ตั้งค่าข้อความภายในองค์ประกอบ

คุณสมบัติ innerText ของ HTMLElement ใช้ **อ่านหรือตั้งค่าข้อความที่มองเห็นได้** ภายในองค์ประกอบ HTML แตกต่างจาก innerHTML ที่รวมแท็ก HTML ด้วย

ความแตกต่าง innerText vs innerHTML vs textContent

รูปแบบการใช้งาน

// อ่านข้อความ
const text = element.innerText;

// ตั้งค่าข้อความ (HTML จะถูก escape อัตโนมัติ)
element.innerText = "Hello <b>World</b>"; // แสดงเป็นตัวอักษรจริง

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
  <style>
    body { text-align: center; font-family: sans-serif; padding: 2rem; }
    .box { 
      background: #347924; 
      width: 200px; 
      padding: 20px; 
      margin: 1rem auto; 
      font-weight: bold; 
      font-size: 1.5rem; 
      color: white; 
      border-radius: 8px;
      min-height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    button { 
      margin: 0.5rem; 
      padding: 0.75rem 1.5rem; 
      border: none; 
      border-radius: 6px; 
      cursor: pointer; 
      font-weight: bold;
    }
    .btn-hi { background: #317EFB; color: white; }
    .btn-hello { background: #E91E63; color: white; }
    .btn-html { background: #FF9800; color: white; }
    .btn-reset { background: #9E9E9E; color: white; }
  </style>
</head>
<body>
  <h1>innerText Property Demo</h1>
  
  <div class="box" id="textBox"></div>
  
  <button class="btn-hi" onclick="writeHi()">Write Hi</button>
  <button class="btn-hello" onclick="writeHello()">Write Hello</button>
  <button class="btn-html" onclick="writeHtml()">Write HTML (innerText)</button>
  <button class="btn-reset" onclick="resetBox()">Reset</button>
  
  <script>
    const box = document.getElementById('textBox');
    
    function writeHi() {
      box.innerText = 'HI';
    }
    
    function writeHello() {
      box.innerText = 'HELLO WORLD';
    }
    
    function writeHtml() {
      // innerText จะ escape HTML ให้อัตโนมัติ
      box.innerText = 'Bold & Italic';
      // ผลลัพธ์: แสดงตัวอักษร Bold & Italic จริงๆ
    }
    
    function resetBox() {
      box.innerText = '';
    }
  </script>
</body>
</html>

พฤติกรรมเฉพาะของ innerText

• **ไม่รวม** องค์ประกอบที่ display: none หรือ visibility: hidden
• **รวม** line breaks จาก <br>, block elements, \n ใน source
• **รองรับ** CSS text-transform (uppercase/lowercase)
• **ปลอดภัยจาก XSS** - HTML tags จะถูก escape อัตโนมัติ

ตัวอย่างแสดงความแตกต่าง

<div id="test" style="display: none">Hidden text</div>
<div id="visible">Visible <span style="display:none">Hidden</span> Text</div>

<script>
  console.log('innerText:', document.getElementById('visible').innerText);
  // "Visible Text" (ไม่รวม span ที่ hidden)
  
  console.log('textContent:', document.getElementById('visible').textContent);
  // "Visible Hidden Text" (รวมทุกอย่าง)
</script>

แนวทางปฏิบัติที่ดีที่สุด

• ใช้ textContent สำหรับการอ่าน/เขียนข้อความทั่วไป (เร็วกว่า, ไม่ trigger reflow)
• ใช้ innerText เมื่อต้องการข้อความ "ที่ผู้ใช้มองเห็น" จริงๆ
• ใช้ innerHTML เฉพาะเมื่อต้อง insert HTML จริง (และ trust source)
• หลีกเลี่ยง innerText ใน loop ใหญ่ๆ - ใช้ textContent แทน