Thuộc tính innerHTML của DOM trong HTML

Giới thiệu

Thuộc tính innerHTML của DOM Element đọc hoặc ghi nội dung HTML bên trong phần tử (bao gồm cả các thẻ con). Rất mạnh để thay đổi cấu trúc DOM động, nhưng cần cẩn trọng XSS khi gán dữ liệu không tin cậy.

Cú pháp

// Lấy
element.innerHTML
// Gán
element.innerHTML = "html_noi_dung"

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    .outer-box { background:#347924; width:200px; height:200px; padding:10px; text-align:center; font-weight:bold; color:white; margin:1rem auto; }
    .inner-box { width:100px; height:100px; margin:3rem auto; background:#8dce79; }
    .inner-circle { width:100px; height:100px; border-radius:50%; background:#8dce79; margin:3rem auto; }
  </style>
</head>
<body>
  <h1>Ví dụ innerHTML</h1>
  <div class="outer-box"></div>
  <button onclick="getSquare()">Lấy Vuông</button>
  <button onclick="getCircle()">Lấy Tròn</button>
  <script>
    function getSquare() { document.querySelector('.outer-box').innerHTML = '<div class="inner-box">vuông</div>'; }
    function getCircle() { document.querySelector('.outer-box').innerHTML = '<div class="inner-circle">tròn</div>'; }
  </script>
</body>
</html>

Kết quả hiển thị

Khung xanh lớn ban đầu trống. Nhấn "Lấy Vuông" -> xuất hiện vuông xanh nhạt bên trong. Nhấn "Lấy Tròn" -> xuất hiện tròn xanh nhạt.