Cách hiển thị biến JavaScript trên trang HTML không dùng document.write

Thay vì document.write() (chỉ hoạt động khi parse HTML, ghi đè trang nếu gọi sau load), hãy dùng Element.innerHTML, textContent hoặc DOM API hiện đại.

Ví dụ: Cập nhật real-time khi nhập input

// HTML: <input class="name"> <span class="jsValue"></span>
const $myName = document.querySelector('.name');
const $jsValue = document.querySelector('.jsValue');

$myName.addEventListener('input', function(event) {
  $jsValue.textContent = $myName.value; // An toàn XSS hơn innerHTML
});

So sánh các phương pháp

Phương pháp	Ưu điểm	Nhược điểm	Khi nào dùng
`textContent`	An toàn XSS, nhanh, chỉ văn bản	Không render HTML	Hiển thị dữ liệu người dùng, text thuần túy
`innerHTML`	Render HTML, mạnh	Rủi ro XSS nếu dữ liệu không tin cậy	Template HTML tin cậy, nội dung đã sanitize
`createElement + append`	An toàn nhất, hiệu năng tốt cho nhiều node	Code dài hơn	Render danh sách, component phức tạp
`insertAdjacentHTML`	Chèn HTML tại vị trí chính xác	Cần sanitize	Thêm nội dung động vào container

Best practice hiện đại

Ưu tiên textContent cho dữ liệu động từ user.
Dùng template literal + DOMParser hoặc framework (React, Vue, Svelte) cho UI phức tạp.
Tránh document.write hoàn toàn trong code production.