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

Giới thiệu

Thuộc tính innerText của DOM Element đọc hoặc ghi nội dung văn bản thuần túy (plain text) bên trong phần tử, bỏ qua thẻ HTML con. Khác với innerHTML (giữ thẻ), innerText chỉ làm việc với text hiển thị, tự động escape ký tự đặc biệt.

Cú pháp

// Lấy
element.innerText
// Gán
element.innerText = "van_ban_moi"

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    .box { background:#347924; width:100px; padding:10px; text-align:center; font-weight:bold; font-size:1.5rem; color:white; margin:1rem auto; }
  </style>
</head>
<body>
  <h1>Ví dụ innerText</h1>
  <div class="box"></div>
  <button onclick="writeHi()">Viết Hi</button>
  <button onclick="writeHello()">Viết Hello</button>
  <script>
    function writeHi() { document.querySelector('.box').innerText = 'HI'; }
    function writeHello() { document.querySelector('.box').innerText = 'HELLO'; }
  </script>
</body>
</html>

Kết quả hiển thị

Ô vuông xanh ban đầu trống. Nhấn "Viết Hi" -> hiện "HI". Nhấn "Viết Hello" -> hiện "HELLO".