Tất cả văn bản được bao gồm bởi một phần tử, cũng như tất cả các phần tử con của nó, được gọi là nội dung văn bản và Khoảng trắng trong văn bản được giảm liên tục trên tất cả các trình duyệt được hỗ trợ khi được truy cập thông qua thuộc tính nội dung văn bản của một phần tử. trong khi HTML bên trong trả về tất cả văn bản cùng với thẻ HTML được bao quanh bởi một phần tử. Thuộc tính này thay đổi nội dung văn bản bên trong một phần tử. Không giống như thuộc tính Nội dung văn bản, HTML bên trong trả về mọi thứ bên trong phần tử một cách chính xác, kể cả HTML

So sánh trực tiếp giữa InternalHTML với textContent (Infographics)

Dưới đây là 9 điểm khác biệt hàng đầu giữa InternalHTML và textContent

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, kiểm thử phần mềm và những thứ khác

Gói phát triển phần mềm tất cả trong một(hơn 600 khóa học, hơn 50 dự án)

Giá
Xem khóa học

600+ Khóa học trực tuyến. hơn 50 dự án. Hơn 3000 giờ. Giấy chứng nhận có thể kiểm chứng. Truy cập Trọn đời
4. 6 (83.908 xếp hạng)

Bảng so sánh của InternalHTML so với textContent

Bảng dưới đây đưa ra sự so sánh giữa HTML bên trong và Nội dung văn bản. Bắt đầu nào

S. KHÔNG Nội dung văn bảnInner HTMLDefinitionKhi thực hiện xong một phần tử, nó trả về một văn bản và phần văn bản được bao bọc bởi phần tử trong khi bỏ qua khoảng trắng. Một điều tốt là văn bản được chọn và sao chép ra khỏi trang (lựa chọn theo chuỗi). HTML bên trong trả về hoặc đặt phần văn bản cùng với các thẻ HTML và khoảng cách được xem xét. Họ xử lý các phần tử bên trong của HTML bằng cách coi các thuộc tính là một tính năng. DevelopInnerText được giới thiệu bởi Microsoft và nó không phải là tiêu chuẩn. Được giới thiệu bởi Microsoft. Các ký tự (và) ,(< ,>) được trả về dưới dạng thực thể HTML. Cú pháp______0

Nó trở lại

el. văn bảnnội dung

 

 

Nó trở lại

el. bên trongHtml

Nội dung CSSText không phải là một hệ thống nhận biết phong cách

 

Nó trả về văn bản được nhúng trong phần tử CSS. Nhưng ở đây dữ liệu ký tự không được tạo ra. Nó bao gồm các thẻ mở và đóng. Thẻ HTML Không thể chèn thẻ HTML. Chúng rất giống với văn bản bên trong. TextContent, mặt khác, thực hiện một điều kỳ lạ. nó bỏ qua các dòng mới được tạo bởi br> và các phần tử được tạo kiểu dưới dạng khối. Tuy nhiên, các khoảng trắng được xác định trong đánh dấu được giữ nguyên. Các thẻ HTML có thể được chèn vào tập lệnh. Chúng không giống với nội dung văn bản. Phần quan trọng của mã

browser.DomElement("//div
[@id='myscript']"). GetProperty("textContent")

browser.DomElement("//div
[@id='myscript']"). GetProperty("innerHtml")

Ưu điểmỞ đây, một thuộc tính trả về nội dung văn bản và phần con của nó thể hiện chính xác cách nội dung văn bản xuất hiện trên trang. Đây là một tính năng hữu ích và cần thiết trong JQuery. Html bên trong được cho là sạch hơn khi thêm các thuộc tính vào một phần tử. Nhược điểm Yêu cầu một vài bố cục thông tin hệ thống khi trả về văn bản làm giảm hiệu suất. Yêu cầu Kiến thức đắt tiền về Bố cục. Dễ bị tấn công bởi các mối đe dọa bảo mật xuyên trang. Dữ liệu chỉ được sử dụng nếu nó bắt nguồn từ một nguồn đáng tin cậy. Ví dụ Ví dụ.

Please Login the sessionTom Donald Welcome to the Page!



let p = document.getElementById('Enterprise email');
console.log(p.textContent)

đầu ra

Vui lòng đăng nhập phiên Tom Donald Chào mừng đến với Trang

 Please Login the session Tom Donald Welcome to the Page!



let p = document.getElementById(' Layout">');
console.log(p.innerHtml)Output:" 
Please Login the session  Tom Donlad Welcome to the Page!
"

Sự khác biệt chính của InternalHTML so với textContent

1. Thuộc tính innerHTML của phần tử lấy hoặc đặt nội dung HTML của phần tử. Vì phần tử textContent không tự động mã hóa và giải mã văn bản nên chúng ta chỉ có thể thao tác với phần nội dung của phần tử.
2. nội dung văn bản chỉ đơn giản cho phép bạn viết văn bản thuần dưới dạng chuỗi, nhưng InternalHTML cung cấp một cách trực tiếp và dễ dàng hơn để tạo các mẫu HTML dưới dạng chuỗi và chèn chúng vào DOM.
3. Mặc dù InternalHTML không hoàn toàn an toàn trong mọi trường hợp, nhưng nó có thể hữu ích trong những trường hợp khác, chẳng hạn như thêm dữ liệu tĩnh trên một trang web không nắm bắt đầu vào của người dùng.
4. Nội dung văn bản loại bỏ các nút con khi thay đổi. Nội dung văn bản có hiệu suất tốt nhưng giá trị của nó không được phân tích cú pháp. Và nó ngăn chặn các cuộc tấn công XSS.
5. nội dung văn bản, không giống như InternalText, không biết về kiểu dáng CSS và sẽ không gây ra hiện tượng chỉnh lại dòng. Chỉ các đối tượng HTMLElement mới có InternalText, trong khi tất cả các đối tượng Node đều có textContent.
6. InnerHtml được hỗ trợ trong Internet Explorer trong khi thuộc tính textContent không được hỗ trợ trong IE.
Hãy bắt đầu với một số tập lệnh HTML mẫu sẽ cho biết cách thức hoạt động của từng thuộc tính.

Ví dụ

Ví dụ 1

demo.html



Place cursor on the Text.

Giải trình

Tập lệnh cho biết hãy nhấp vào cụm từ và nội dung được thay đổi thành văn bản và đầu ra được hiển thị dưới dạng

đầu ra

Ví dụ #2

không khí. html

Airline Ticket Reservation
inner
textContent

Giải trình

Mã ví dụ trên hiển thị cả định dạng InternalHTML và văn bản Nội dung. Vì vậy, khi một nút được gửi, trang sẽ chuyển hướng đến hộp thoại hiển thị nội dung văn bản

đầu ra

Sau khi nhấp vào nút bên trong

Sau khi nhấp vào nút textContent

Ví dụ #3

giáo dục. html

This is EDUCBA
Button Press for Text Content

Press

Giải trình

Nội dung văn bản trả về văn bản được nối của tất cả các nút văn bản trong Tập lệnh đang loại bỏ các thẻ đánh dấu. Trong đoạn script trên khi một nút được nhấp vào, nó sẽ hiển thị văn bản trong các thẻ HTML, không phải các thẻ đánh dấu. Do đó, đầu ra trông như thế này

đầu ra

Ví dụ #4

trang. html

________số 8

Giải trình

Chúng ta có thể thấy rằng định dạng từ đoạn trên cùng đã bị xóa khỏi đoạn dưới cùng khi chúng ta thực hiện ví dụ trên. Điều này nói rằng chúng tôi sẽ không thể thay thế văn bản bằng HTML bằng textContent

đầu ra

Phần kết luận

Do đó, trong bài viết này, chúng ta đã học cách sử dụng Các thuộc tính JavaScript của nội dung văn bản và Html bên trong để lấy các nút văn bản và các phần tử Html cũng như hậu duệ của chúng. InternalHTML linh hoạt hơn vì nó cho phép sáng tạo hơn. Nếu người dùng chỉ muốn trả lại nội dung văn bản, textContent là cách tốt nhất. Vì chúng ta có nhiều thuộc tính JavaScript hơn mà chúng ta đã thảo luận trong bài viết trước, điều đó phụ thuộc vào tình huống của thuộc tính mà chúng ta nên ưu tiên

Bài viết được đề xuất

Đây là hướng dẫn về InternalHTML so với textContent. Ở đây chúng ta thảo luận về sự khác biệt chính giữa InternalHTML và textContent với infographics và bảng so sánh, tương ứng. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –

TextContent có nhanh hơn InternalHTML không?

Cái nào bên trong hoặc textContent tốt hơn?

Tại sao bạn không nên sử dụng InternalHTML?

TextContent có nhanh hơn InternalText không?