Lập trình · 25/09/2026

JavaScript textContent: Hiển thị dữ liệu văn bản mà không biến thành HTML

Một tên sản phẩm lấy từ API có thể chứa dấu ngoặc nhọn, dấu & hoặc chuỗi giống thẻ HTML. Nếu mục tiêu chỉ là hiển thị tên, ứng dụng không cần diễn giải chuỗi đó thành cấu trúc trang. Chọn đúng cách cập nhật DOM giúp giữ dữ liệu là văn bản và làm ý định của mã rõ ràng hơn.

1. Văn bản khác với HTML

Theo tài liệu MDN về textContent, gán textContent cho một phần tử sẽ thay các node con bằng nội dung văn bản. Ngược lại, innerHTML xử lý chuỗi như HTML. Vì vậy, với nhãn hoặc tiêu đề thuần văn bản, textContent là lựa chọn phù hợp hơn việc ghép chuỗi HTML.

Ví dụ tên sản phẩm là chuỗi <strong>Bản thử nghiệm</strong>. Yêu cầu của sản phẩm có thể là hiển thị nguyên văn cả dấu ngoặc, không phải in đậm phần ở giữa. Việc dữ liệu đến từ API của chính hệ thống không tự biến nó thành HTML đáng tin cậy.

2. Ví dụ cập nhật một vùng văn bản riêng

Tạo markup dưới đây trong trang thử nghiệm. Chạy JavaScript sau khi các phần tử đã tồn tại, chẳng hạn dùng file script có defer. Không dán dữ liệu thật hoặc thông tin nhạy cảm vào công cụ thử nghiệm công khai.

<p>Sản phẩm: <span id="product-name"></span></p>

const product = {
  name: '<strong>Bản thử nghiệm</strong>'
};

const nameElement = document.getElementById('product-name');

if (nameElement) {
  nameElement.textContent =
    typeof product.name === 'string'
      ? product.name
      : 'Chưa có tên';
}

Kết quả mong đợi là hiển thị nguyên chuỗi tên, không tạo phần tử strong bên trong span. Nhánh kiểm tra kiểu tránh vô tình hiển thị một object hoặc giá trị thiếu như tên sản phẩm. Chuỗi rỗng vẫn được giữ trong ví dụ; nếu cần nhãn thay thế cho chuỗi rỗng, hãy quy định riêng.

3. Không gán vào phần tử cha chứa nút bấm

Giả sử một thẻ sản phẩm chứa tên, giá và nút “Thêm vào giỏ”. Gán textContent cho toàn bộ thẻ sẽ thay hết nội dung con, bao gồm cả nút. Vấn đề không nằm ở dữ liệu đầu vào mà ở phạm vi cập nhật quá rộng.

Hãy dành một span hoặc phần tử tương tự cho từng giá trị cần thay đổi. Cập nhật node chứa tên thay vì container của cả thẻ. Sau thay đổi, kiểm tra nút còn tồn tại, focus vẫn hợp lý và thao tác của người dùng không bị gián đoạn.

4. textContent không phải bộ lọc cho mọi ngữ cảnh

Ví dụ trên chỉ nói về văn bản trong một phần tử hiển thị thông thường. Nó không xác thực URL, không kiểm tra quyền truy cập và không làm sạch một tài liệu HTML để giữ lại định dạng. Đặc biệt, không áp dụng kết luận “chỉ là văn bản nên an toàn” cho việc tạo nội dung script hoặc style.

Nếu yêu cầu là rich text, đội phát triển cần chính sách riêng về thẻ được phép, thuộc tính, liên kết và công cụ làm sạch HTML phù hợp. Đừng chuyển sang innerHTML chỉ vì người dùng muốn có chữ đậm mà chưa xác định nguồn dữ liệu và cách xử lý.

5. Checklist thử nghiệm

Tên bình thường và tên có dấu tiếng Việt hiển thị đúng.
Chuỗi giống thẻ HTML hiển thị nguyên văn, không tạo phần tử mới.
Dấu & và dấu ngoặc không bị biến thành nội dung khác.
null, object và chuỗi rỗng có hành vi được thống nhất.
Cập nhật tên không xóa nút, giá hoặc thông tin khác.
Tên dài được xử lý bằng bố cục phù hợp, không bằng cách diễn giải lại thành HTML.

Nguyên tắc thực hành: dữ liệu văn bản nên đi vào một vùng văn bản cụ thể. Khi cần cấu trúc HTML, hãy coi đó là một yêu cầu khác và thiết kế cách xử lý rõ ràng từ đầu.