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

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

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

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

// อ่าน HTML
const html = element.innerHTML;

// ตั้งค่า HTML (parse และ render)
element.innerHTML = 'Bold & Italic';
// ผลลัพธ์: แสดง Bold และ Italic จริง

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

<!DOCTYPE html>
<html>
<head>
  <style>
    body { text-align: center; font-family: sans-serif; padding: 2rem; }
    .outer-box { 
      background: #347924; 
      width: 300px; 
      height: 200px; 
      margin: 1rem auto; 
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .inner-box { 
      width: 120px; 
      height: 120px; 
      background: #8dce79; 
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: #1b5e20;
      border-radius: 8px;
    }
    .inner-circle { 
      width: 120px; 
      height: 120px; 
      border-radius: 50%; 
      background: #8dce79; 
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: #1b5e20;
    }
    button { 
      margin: 0.5rem; 
      padding: 0.75rem 1.5rem; 
      border: none; 
      border-radius: 6px; 
      cursor: pointer; 
      font-weight: bold;
      background: #317EFB;
      color: white;
    }
    button:hover { background: #2563eb; }
  </style>
</head>
<body>
  <h1>innerHTML Property Demo</h1>
  
  <div class="outer-box" id="outerBox"></div>
  
  <button onclick="getSquare()">Get Square</button>
  <button onclick="getCircle()">Get Circle</button>
  <button onclick="getHtml()">Show HTML</button>
  <button onclick="clearBox()">Clear</button>
  
  <pre id="htmlOutput" style="text-align:left; background:#f5f5f5; padding:1rem; border-radius:8px; max-width:500px; margin:1rem auto; overflow:auto;"></pre>
  
  <script>
    const outerBox = document.getElementById('outerBox');
    const htmlOutput = document.getElementById('htmlOutput');
    
    function getSquare() {
      outerBox.innerHTML = '
Square
';
      showHtml();
    }
    
    function getCircle() {
      outerBox.innerHTML = '
Circle
';
      showHtml();
    }
    
    function getHtml() {
      htmlOutput.textContent = outerBox.innerHTML;
    }
    
    function clearBox() {
      outerBox.innerHTML = '';
      htmlOutput.textContent = '';
    }
    
    function showHtml() {
      htmlOutput.textContent = outerBox.innerHTML;
    }
  </script>
</body>
</html>

⚠️ ความปลอดภัย: XSS (Cross-Site Scripting)

<!-- ОПАСНО - อันตราย! -->
<script>
  // ผู้ใช้กรอก: 
  const userInput = getUserInput(); 
  element.innerHTML = userInput; // รันสคริปต์ของแฮกเกอร์!
</script>

วิธีป้องกัน XSS

<!-- วิธี 1: ใช้ textContent / innerText แทน -->
element.textContent = userInput; // ปลอดภัย

<!-- วิธี 2: Sanitize ก่อนใช้ (DOMPurify library) -->
import DOMPurify from 'dompurify';
element.innerHTML = DOMPurify.sanitize(userInput);

<!-- วิธี 3: สร้าง element แทน -->
const div = document.createElement('div');
div.textContent = userInput;
element.appendChild(div);

กรณีใช้งานจริง

• Template rendering (ร่วมกับ template engine)
• Dynamic content จาก trusted source (CMS, API ของตัวเอง)
• SVG manipulation
• Code editors/playgrounds

Performance Tips

• หลีกเลี่ยง innerHTML ใน loop ใหญ่ - ใช้ DocumentFragment หรือ createElement
• innerHTML = '' เร็วกว่า removeChild loop สำหรับลบ children ทั้งหมด
• ใช้ insertAdjacentHTML() สำหรับเพิ่ม HTML โดยไม่ทับซ้อน content เดิม