Báo cáo quyền truy cập JavaScript vào các nút DOM dưới dạng văn bản bằng thuộc tính innerHTML
. Hầu hết các cách sử dụng của innerHTML
được thực hiện tốt hơn với các cuộc gọi DOM rõ ràng, chẳng hạn như
0 vàCode language: JavaScript [javascript]
let div = document.querySelector['.container']; let p = document.createElement['p']; p.textContent = 'JS DOM'; div.appendChild[p];
1. Ngoài ra,Code language: JavaScript [javascript]
let div = document.querySelector['.container']; let p = document.createElement['p']; p.textContent = 'JS DOM'; div.appendChild[p];
innerHTML
sẽ không hoạt động với XML DOM, bao gồm cả DOM cho XHTML nếu được xem dưới dạng XML. Điều này có thể dẫn đến khó khăn trong việc chẩn đoán lỗiChặn kiểm tra trong trình chỉnh sửa
Định vị dấu mũ tại dòng được đánh dấu và nhấn Alt+Enter hoặc nhấp
Nhấp vào mũi tên bên cạnh kiểm tra mà bạn muốn chặn và chọn hành động chặn cần thiết
Ví dụ
Nhận nội dung HTML của một phần tử với id="myP"
hãy để html = tài liệu. getElementById["myP"]. bên trongHTML;
Tự mình thử »Thay đổi nội dung HTML của một phần tử với id="demo"
tài liệu. getElementById["bản trình diễn"]. innerHTML = "Tôi đã thay đổi. “;
Tự mình thử »Lấy nội dung HTML của một
- phần tử có id="myList"
hãy để html = tài liệu. getElementById["myList"]. bên trongHTML;
Tự mình thử »Xóa nội dung HTML của một
phần tử có id="demo"
Tự mình thử »Thêm ví dụ bên dưới
Định nghĩa và cách sử dụng
Thuộc tính
innerHTML
đặt hoặc trả về nội dung HTML [HTML bên trong] của một phần tửSự khác biệt giữa
innerHTML, văn bản bên trong và nội dung văn bảnXem bên dưới
cú pháp
Trả về thuộc tính InternalHTML
Đặt thuộc tính InternalHTML
Giá trị tài sản
Thuộc tínhMô tảStringNội dung HTMLGiá trị trả về
TypeDescriptionStringNội dung HTML của phần tửThêm ví dụ
Ví dụ
Thay đổi nội dung HTML của hai phần tử
let text = "Xin chào Dolly. ";
Tự mình thử »
tài liệu. getElementById["myP"]. innerHTML = văn bản;
tài liệu. getElementById["myDIV"]. InternalHTML = văn bản;Ví dụ
Lặp lại nội dung HTML của một phần tử
thành phần. phần tử bên trongHTML +=. bên trongHTML;
Tự mình thử »Ví dụ
Thay đổi nội dung HTML và URL của một liên kết
. innerHTML = "W3Schools";
Tự mình thử »
phần tử. href = "https. //www. w3schools. com";Sự khác biệt giữa
Thuộc tính innerHTML trả về.
innerHTML, văn bản bên trong và nội dung văn bản
Nội dung văn bản của phần tử, bao gồm tất cả khoảng cách và thẻ HTML bên trong. Thuộc tính InternalText trả về.
Chỉ nội dung văn bản của phần tử và tất cả các phần tử con của nó, không có thẻ và khoảng cách văn bản ẩn CSS, ngoại trừNó được sử dụng chủ yếu trong các trang web để tạo html động như biểu mẫu đăng ký, biểu mẫu nhận xét, liên kết, v.v.
Ví dụ về thuộc tính InternalHTML
Trong ví dụ này, chúng ta sẽ tạo biểu mẫu html khi người dùng nhấp vào nút
Trong ví dụ này, chúng tôi đang viết động biểu mẫu html bên trong tên div có id mylocation. Chúng tôi đang xác định vị trí này bằng cách gọi tài liệu. phương thức getElementById[]
Tóm lược. trong hướng dẫn này, bạn sẽ tìm hiểu sự khác biệt giữa
innerHTML
và
1 khi tạo các phần tử mới trong cây DOM
Code language: JavaScript [javascript]let div = document.querySelector['.container']; let p = document.createElement['p']; p.textContent = 'JS DOM'; div.appendChild[p];
#1] createElement hiệu quả hơn
Giả sử rằng bạn có một phần tử
6 với bộ chứa lớp
Code language: JavaScript [javascript]let div = document.querySelector['.container']; let p = document.createElement['p']; p.textContent = 'JS DOM'; div.appendChild[p];
Code language: HTML, XML [xml]Bạn có thể tạo các phần tử mới cho phần tử
6 bằng cách tạo một phần tử và nối thêm phần tử đó
Code language: JavaScript [javascript]let div = document.querySelector['.container']; let p = document.createElement['p']; p.textContent = 'JS DOM'; div.appendChild[p];
Code language: JavaScript [javascript]let div = document.querySelector['.container']; let p = document.createElement['p']; p.textContent = 'JS DOM'; div.appendChild[p];
Bạn cũng có thể thao tác trực tiếp với HTML của một phần tử bằng cách sử dụng
innerHTML
như thế nàylet div = document.querySelector['.container']; div.innerHTML += '
JS DOM
';Sử dụng
innerHTML
gọn gàng và ngắn gọn hơn khi bạn muốn thêm thuộc tính cho phần tử
Code language: JavaScript [javascript]let div = document.querySelector['.container']; div.innerHTML += '
JS DOM
';Tuy nhiên, việc sử dụng
innerHTML
khiến trình duyệt web phân tích lại và tạo lại tất cả các nút DOM bên trong phần tử div. Do đó, nó kém hiệu quả hơn so với việc tạo một phần tử mới và nối thêm vào div. Nói cách khác, việc tạo một phần tử mới và gắn nó vào cây DOM mang lại hiệu suất tốt hơn so vớiinnerHTML
#2] createElement an toàn hơn
Như đã đề cập trong hướng dẫn InternalHTML, bạn chỉ nên sử dụng nó khi dữ liệu đến từ một nguồn đáng tin cậy như cơ sở dữ liệu
Nếu bạn đặt nội dung mà bạn không có quyền kiểm soát vào bên trongHTML, mã độc hại có thể được đưa vào và thực thi
#3] Sử dụng DocumentFragment để soạn DOM Nodes
Giả sử rằng bạn có một danh sách các phần tử và bạn cần trong mỗi lần lặp lại
Code language: JavaScript [javascript]let div = document.querySelector['.container']; for [let i = 0; i < 1000; i++] { let p = document.createElement['p']; p.textContent = `Paragraph ${i}`; div.appendChild[p]; }
Mã này dẫn đến việc tính toán lại các kiểu, vẽ và bố cục sau mỗi lần lặp lại. Điều này không hiệu quả lắm
Để khắc phục điều này, bạn thường sử dụng một
4 để soạn các nút DOM và nối nó vào cây DOM
Code language: JavaScript [javascript]let div = document.querySelector['.container']; let p = document.createElement['p']; p.textContent = 'JS DOM'; div.appendChild[p];
Code language: JavaScript [javascript]let div = document.querySelector['.container']; // compose DOM nodes let fragment = document.createDocumentFragment[]; for [let i = 0; i < 1000; i++] { let p = document.createElement['p']; p.textContent = `Paragraph ${i}`; fragment.appendChild[p]; } // append the fragment to the DOM tree div.appendChild[fragment];
Trong ví dụ này, chúng tôi đã tạo các nút DOM bằng cách sử dụng đối tượng
4 và nối đoạn đó vào cây DOM đang hoạt động một lần ở cuối
Code language: JavaScript [javascript]let div = document.querySelector['.container']; let p = document.createElement['p']; p.textContent = 'JS DOM'; div.appendChild[p];
Một đoạn tài liệu không liên kết với cây DOM đang hoạt động, do đó, nó không phát sinh bất kỳ hiệu suất nào
Mục đích chính của InternalHTML là gì?
Thuộc tính innerHTML đặt hoặc trả về nội dung HTML [HTML bên trong] của một phần tử .Nguy hiểm của việc sử dụng InternalHTML là gì?
'innerHTML' đưa ra Rủi ro bảo mật . Người dùng độc hại có thể sử dụng tập lệnh chéo trang [XSS] để thêm tập lệnh phía máy khách độc hại nhằm đánh cắp thông tin người dùng riêng tư được lưu trữ trong cookie phiên.Khi nào nên sử dụng InternalHTML?
innerHTML hữu ích tại bất kỳ lúc nào để chèn thẻ/nội dung HTML mới dưới dạng chuỗi và có thể dễ dàng chuyển hướng đến các thành phần cụ thể trong .Lợi thế của InternalHTML trong JavaScript là gì?
Nó cho phép mã JavaScript điều khiển một trang web đang được hiển thị . Cụ thể hơn, nó đặt hoặc trả về nội dung HTML [HTML bên trong] của một phần tử. Thuộc tính innerHTML được sử dụng rộng rãi để sửa đổi nội dung của trang web vì đây là cách dễ dàng nhất để sửa đổi DOM.