Tại sao nội dung văn bản tốt hơn nội dung html?

Trong JavaScript, có ba thuộc tính có thể được sử dụng để đặt hoặc trả về nội dung của phần tử HTML trong DOM. InternalHTML, InternalText và TextContent. Nếu bạn không chắc chắn về sự khác biệt và tự hỏi nên sử dụng cái nào, hy vọng so sánh sau đây sẽ giúp ích cho bạn

(1) Thuộc tính innerHTML đặt và trả về nội dung của phần tử có nội dung HTML mới

Setting text with innerHTML:const example = document.getElementById(‘example’)
example.innerHTML = “

This is my paragraph.

Mặc dù HTML5 ngăn thẻ

Để tìm hiểu thêm về các cuộc tấn công InternalHTML và Cross-Site Scripting (XSS), hãy tham khảo các liên kết tài nguyên ở cuối bài đăng này

HTML5 prevents malicious "
el.innerHTML = example1

const example2 = document.getElementById('example2')
example2.innerHTML = ''


Examples of cybercriminals embedding JavaScript without "
el.innerHTML = example1

const example2 = document.getElementById('example2')
example2.innerHTML = ''


Examples of cybercriminals embedding JavaScript without

Một nhược điểm khi sử dụng InternalText là giá trị của nó kích hoạt chỉnh lại dòng do nhận thức về kiểu dáng CSS, dẫn đến giảm hiệu suất. Chỉnh lại dòng là khi trình duyệt tính toán lại các thành phần trang để hiển thị lại tài liệu. Các trường hợp kích hoạt chỉnh lại dòng bao gồm thay đổi kích thước cửa sổ trình duyệt hoặc thay đổi các phần tử trong DOM. Reflow tốn kém về mặt tính toán và nên được giảm thiểu để cải thiện tốc độ, hiệu quả và trải nghiệm người dùng

GHI CHÚ. Thuộc tính InternalText không được hỗ trợ trong Internet Explorer 9 trở về trước

Setting text with innerText:const example = document.getElementById('example')
example.innerText = "text"

(3) Thuộc tính textContent trả về nội dung thô với kiểu dáng bên trong tất cả các phần tử, nhưng loại trừ các thẻ phần tử HTML. Điều này bao gồm các phần tử "
el.innerHTML = example1

const example2 = document.getElementById('example2')
example2.innerHTML = ''


Examples of cybercriminals embedding JavaScript without

GHI CHÚ. Thuộc tính textContent không được hỗ trợ trong Internet Explorer 8 trở về trước

Setting text with textContent:const example = document.getElementById('example')
example.textContent = "word"

Ví dụ dưới đây cho thấy cách mỗi thuộc tính trong số ba thuộc tính trả về nội dung của phần tử

HTML5 prevents malicious "
el.innerHTML = example1

const example2 = document.getElementById('example2')
example2.innerHTML = ''


Examples of cybercriminals embedding JavaScript without