Thuộc tính innerHTML là một phần của Mô hình đối tượng tài liệu [DOM] được sử dụng để đặt hoặc trả về nội dung HTML của một phần tử. Trường hợp giá trị trả về đại diện cho nội dung văn bản của phần tử HTML. Nó cho phép mã JavaScript thao tác 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. Nhưng có một số nhược điểm khi sử dụng InternalHTML trong JavaScript
Tóm lược. trong hướng dẫn này, bạn sẽ học cách sử dụng thuộc tính JavaScript
2 của một phần tử để lấy hoặc đặt đánh dấu HTML có trong phần tử đóCode language: JavaScript [javascript]
let content = element.innerHTML;
2 là một thuộc tính củaCode language: JavaScript [javascript]
let content = element.innerHTML;
4 cho phép bạn lấy hoặc đặt đánh dấu HTML có trong phần tửCode language: JavaScript [javascript]
let content = element.innerHTML;
Code language: JavaScript [javascript]
element.innerHTML = 'new content'; element.innerHTML;
Đọc thuộc tính InternalHTML của một phần tử
Để lấy đánh dấu HTML có trong một phần tử, bạn sử dụng cú pháp sau
Code language: JavaScript [javascript]
let content = element.innerHTML;
Khi bạn đọc
2 của một phần tử, trình duyệt web phải tuần tự hóa đoạn HTML của phần tử con của phần tử đóCode language: JavaScript [javascript]
let content = element.innerHTML;
1] Ví dụ JavaScript InternalHTML đơn giản
Giả sử rằng bạn có đánh dấu sau
Code language: HTML, XML [xml]
Home Services
Ví dụ sau sử dụng thuộc tính
2 để lấy nội dung của phần tửCode language: JavaScript [javascript]
let content = element.innerHTML;
7Code language: JavaScript [javascript]
let content = element.innerHTML;
let menu = document.getElementById['menu']; console.log[menu.innerHTML];
Code language: JavaScript [javascript]
Làm thế nào nó hoạt động
- Đầu tiên, chọn phần tử
7 theo id của nó [
Code language: JavaScript [javascript]let content = element.innerHTML;
9] bằng cách sử dụng phương thức
Code language: JavaScript [javascript]let content = element.innerHTML;
0
Code language: HTML, XML [xml]Home Services
- Sau đó, lấy nội dung HTML của phần tử
7 bằng cách sử dụng hàm
Code language: JavaScript [javascript]let content = element.innerHTML;
2
Code language: JavaScript [javascript]let content = element.innerHTML;
đầu ra
Code language: HTML, XML [xml]
Home Services
2] Kiểm tra nguồn HTML hiện tại
Thuộc tính
2 trả về nguồn HTML hiện tại của tài liệu, bao gồm tất cả các thay đổi đã được thực hiện kể từ khi trang được tảiCode language: JavaScript [javascript]
let content = element.innerHTML;
Xem ví dụ sau
Code language: HTML, XML [xml]
JavaScript innerHTML Home Services let menu = document.getElementById['menu']; // create new li element let li = document.createElement['li']; li.textContent = 'About Us'; // add it to the ul element menu.appendChild[li]; console.log[menu.innerHTML];
đầu ra
Code language: HTML, XML [xml]
Home Services About Us
Làm thế nào nó hoạt động
- Đầu tiên, lấy phần tử
7 có id
Code language: JavaScript [javascript]let content = element.innerHTML;
9 bằng phương thứclet content = element.innerHTML;
0
Code language: HTML, XML [xml]Home Services
- Second, create a new
7 element and add it to the
Code language: HTML, XML [xml]Home Services
- element using the
8 and
Code language: HTML, XML [xml]Home Services
9 methods.
Code language: HTML, XML [xml]Home Services
- Third, get the HTML of the
7 element using the innerHTML property of the
Code language: JavaScript [javascript]let content = element.innerHTML;
- element. The contents of the
- element include the initial content and the dynamic content created dynamically by JavaScript.
Đặt thuộc tính InternalHTML của một phần tử
Để đặt giá trị của thuộc tính
2, bạn sử dụng cú pháp nàyCode language: JavaScript [javascript]
let content = element.innerHTML;
element.innerHTML = newHTML;
Cài đặt sẽ thay thế nội dung hiện có của một phần tử bằng nội dung mới
Ví dụ: bạn có thể xóa toàn bộ nội dung của tài liệu bằng cách xóa nội dung của phần tử
2Code language: JavaScript [javascript]
let menu = document.getElementById['menu']; console.log[menu.innerHTML];
Code language: JavaScript [javascript]
document.body.innerHTML = '';
⚠️ Rủi ro bảo mật
HTML5 specifies that a tag inserted with innerHTML should not execute.
Giả sử bạn có tài liệu
3 sauCode language: JavaScript [javascript]
let menu = document.getElementById['menu']; console.log[menu.innerHTML];
Code language: HTML, XML [xml]
JS innerHTML example
Và tệp
4 trông như thế này
let menu = document.getElementById['menu']; console.log[menu.innerHTML];
Code language: JavaScript [javascript]
0Code language: JavaScript [javascript]
let content = element.innerHTML;
Trong ví dụ này,
5 bên trong thẻCode language: JavaScript [javascript]
let menu = document.getElementById['menu']; console.log[menu.innerHTML];
6 sẽ không thực thiCode language: JavaScript [javascript]
let menu = document.getElementById['menu']; console.log[menu.innerHTML];
Tuy nhiên, nếu bạn thay đổi mã nguồn của
4 như sauCode language: JavaScript [javascript]
let menu = document.getElementById['menu']; console.log[menu.innerHTML];
1Code language: JavaScript [javascript]
let content = element.innerHTML;
Trong ví dụ này, hình ảnh có src 1 sẽ không được tải thành công. Do đó, lỗi bật sẽ thực thi chạy cảnh báo []
Thay vì có một cảnh báo[] đơn giản, tin tặc có thể đưa vào mã độc, người dùng mở trang web sẽ dễ bị tấn công
Vì vậy, bạn không nên đặt những nội dung mà bạn không có quyền kiểm soát thành
2, nếu không bạn sẽ đối mặt với rủi ro bảo mật tiềm ẩnCode language: JavaScript [javascript]
let content = element.innerHTML;
Nếu bạn muốn chèn văn bản thuần túy vào tài liệu, bạn có thể sử dụng thuộc tính
9 thay vìCode language: JavaScript [javascript]
let menu = document.getElementById['menu']; console.log[menu.innerHTML];
2.Code language: JavaScript [javascript]
let content = element.innerHTML;
1 sẽ không được phân tích dưới dạng HTML mà dưới dạng văn bản thôCode language: HTML, XML [xml]
Home Services