Tại sao chúng tôi đang sử dụng InternalHTML?

Question

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

Nội dung chính Show

Đọc thuộc tính InternalHTML của một phần tử
1) Ví dụ JavaScript InternalHTML đơn giản
2) Kiểm tra nguồn HTML hiện tại
Đặt thuộc tính InternalHTML của một phần tử
⚠️ Rủi ro bảo mật
Mục đích chính của InternalHTML là gì?
Việc sử dụng InternalHTML có tốt không?
Tại sao bạn không nên sử dụng InternalHTML?
Bạn nên sử dụng InternalHTML hay InternalText?

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

let content = element.innerHTML;
Code language: JavaScript (javascript)

2 của một phần tử để lấy hoặc đặt đánh dấu HTML có trong phần tử đó

let content = element.innerHTML;
Code language: JavaScript (javascript)

2 là một thuộc tính của

let content = element.innerHTML;
Code language: JavaScript (javascript)

4 cho phép bạn lấy hoặc đặt đánh dấu HTML có trong phần tử

element.innerHTML = 'new content';
element.innerHTML;
Code language: JavaScript (javascript)

Đọ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

let content = element.innerHTML;
Code language: JavaScript (javascript)

Khi bạn đọc

let content = element.innerHTML;
Code language: JavaScript (javascript)

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ử đó

1) Ví dụ JavaScript InternalHTML đơn giản

Giả sử rằng bạn có đánh dấu sau

 <ul id="menu">
    <li>Homeli>
    <li>Servicesli>
ul>
Code language: HTML, XML (xml)

Ví dụ sau sử dụng thuộc tính

let content = element.innerHTML;
Code language: JavaScript (javascript)

2 để lấy nội dung của phần tử

let content = element.innerHTML;
Code language: JavaScript (javascript)

7

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ử

let content = element.innerHTML;
Code language: JavaScript (javascript)

7 theo id của nó (

let content = element.innerHTML;
Code language: JavaScript (javascript)

9) bằng cách sử dụng phương thức

 <ul id="menu">
    <li>Homeli>
    <li>Servicesli>
ul>
Code language: HTML, XML (xml)

0

Sau đó, lấy nội dung HTML của phần tử

let content = element.innerHTML;
Code language: JavaScript (javascript)

7 bằng cách sử dụng hàm

let content = element.innerHTML;
Code language: JavaScript (javascript)

2

đầu ra

<li>Homeli>
<li>Servicesli>
Code language: HTML, XML (xml)

2) Kiểm tra nguồn HTML hiện tại

Thuộc tính

let content = element.innerHTML;
Code language: JavaScript (javascript)

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ải

Xem ví dụ sau

html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript innerHTMLtitle>
head>
<body>
    <ul id="menu">
        <li>Homeli>
        <li>Servicesli>
    ul>
    <script>
        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);
    script>
body>
html>
Code language: HTML, XML (xml)

đầu ra

<li>Homeli>
<li>Servicesli>
<li>About Usli>
Code language: HTML, XML (xml)

Làm thế nào nó hoạt động

Đầu tiên, lấy phần tử

let content = element.innerHTML;
Code language: JavaScript (javascript)

7 có id

let content = element.innerHTML;



Code language: JavaScript (javascript)

9 bằng phương thức

 <ul id="menu">
    <li>Homeli>
    <li>Servicesli>
ul>
Code language: HTML, XML (xml)

0

Second, create a new
```
 <ul id="menu">
    <li>Homeli>
    <li>Servicesli>
ul>
Code language: HTML, XML (xml)
```
7 element and add it to the
- Third, get the HTML of the
```
let content = element.innerHTML;
Code language: JavaScript (javascript)
```
  7 element using the innerHTML property of the

Code language: JavaScript (javascript)4 trông như thế này

let content = element.innerHTML;
Code language: JavaScript (javascript)

0

Trong ví dụ này,

let menu = document.getElementById('menu');
console.log(menu.innerHTML);
Code language: JavaScript (javascript)

5 bên trong thẻ

let menu = document.getElementById('menu');
console.log(menu.innerHTML);
Code language: JavaScript (javascript)

6 sẽ không thực thi

Tuy nhiên, nếu bạn thay đổi mã nguồn của

let menu = document.getElementById('menu');
console.log(menu.innerHTML);
Code language: JavaScript (javascript)

4 như sau

let content = element.innerHTML;
Code language: JavaScript (javascript)

1

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

let content = element.innerHTML;
Code language: JavaScript (javascript)

2, nếu không bạn sẽ đối mặt với rủi ro bảo mật tiềm ẩn

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

let menu = document.getElementById('menu');
console.log(menu.innerHTML);
Code language: JavaScript (javascript)

9 thay vì

let content = element.innerHTML;
Code language: JavaScript (javascript)

2.

<li>Homeli>
<li>Servicesli>
Code language: HTML, XML (xml)

1 sẽ không được phân tích dưới dạng HTML mà dưới dạng văn bản thô

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ử .

Việc sử dụng InternalHTML có tốt không?

Việc sử dụng InternalHTML tạo ra rủi ro bảo mật tiềm ẩn cho trang web của bạn . 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.

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

Có thể ngắt tài liệu . InternalHTML không cung cấp xác thực thích hợp, vì vậy bất kỳ mã HTML hợp lệ nào cũng có thể được sử dụng. Điều này có thể phá vỡ tài liệu của JavaScript. Ngay cả HTML bị hỏng cũng có thể được sử dụng, điều này có thể dẫn đến các sự cố không mong muốn.

Bạn nên sử dụng InternalHTML hay InternalText?

Thuộc tính InnerText html mã hóa nội dung, biến Nếu muốn chèn các thẻ HTML, bạn cần sử dụng InnerHTML . Chỉ để rõ ràng. Điều này chỉ áp dụng khi THIẾT LẬP một giá trị. Khi bạn NHẬN được giá trị, các thẻ HTML sẽ bị xóa và bạn nhận được văn bản thuần túy.

programming html

Tại sao chúng tôi đang sử dụng InternalHTML?

Đọc thuộc tính InternalHTML của một phần tử

1) Ví dụ JavaScript InternalHTML đơn giản

2) Kiểm tra nguồn HTML hiện tại

Đặt thuộc tính InternalHTML của một phần tử

⚠️ Rủi ro bảo mật

Mục đích chính của InternalHTML là gì?

Việc sử dụng InternalHTML có tốt không?

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

Bạn nên sử dụng InternalHTML hay InternalText?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội