Hướng dẫn what is the work of innerhtml? - công việc của Internalhtml là gì?

Question

Thuộc tính

document.body.innerHTML = "";

2

document.body.innerHTML = "";

3 được hoặc đặt đánh dấu HTML hoặc XML có trong phần tử.
document.body.innerHTML = "";
3 gets or sets the HTML or XML markup contained within the element.

Nội dung chính Show

Ngoại lệ
Ghi chú sử dụng
Đọc nội dung HTML của một phần tử
Thay thế nội dung của một phần tử
Nối HTML vào một phần tử
Cân nhắc về Bảo mật
Kết quả
Thông số kỹ thuật
Tính tương thích của trình duyệt web
InnerHtml được sử dụng để làm gì?
Làm thế nào để InnerHTML hoạt động trong JavaScript?
.Innerhtml trở lại là gì?
Tại sao bên trong không hoạt động?

Để chèn HTML vào tài liệu thay vì thay thế nội dung của một phần tử, hãy sử dụng phương thức

document.body.innerHTML = "";

4.

Giá trị

Một chuỗi chứa tuần tự hóa HTML của con cháu của phần tử. Đặt giá trị của

document.body.innerHTML = "";

3 loại bỏ tất cả các hậu duệ của phần tử và thay thế chúng bằng các nút được xây dựng bằng cách phân tích HTML được đưa ra trong chuỗi HTMLString.

Ngoại lệ

document.body.innerHTML = "";

6

document.body.innerHTML = "";

7

Ném nếu một nỗ lực được thực hiện để đặt giá trị của

document.body.innerHTML = "";

3 bằng cách sử dụng một chuỗi không được hình thành đúng cách HTML.

document.body.innerHTML = "";

9

document.body.innerHTML = "";

7

Ném nếu một nỗ lực được thực hiện để chèn HTML vào một nút có cha mẹ là

document.documentElement.innerHTML = `<pre>${document.documentElement.innerHTML.replace(/</g,"&lt;")}</pre>`;

1.

Ghi chú sử dụng

Thuộc tính

document.body.innerHTML = "";

3 có thể được sử dụng để kiểm tra nguồn HTML hiện tại của trang, bao gồm mọi thay đổi đã được thực hiện kể từ khi trang ban đầu được tải.

Đọc nội dung HTML của một phần tử

Đọc

document.body.innerHTML = "";

3 khiến tác nhân người dùng tuần tự hóa đoạn HTML hoặc XML bao gồm hậu duệ của phần tử. Chuỗi kết quả được trả về.

let contents = myElement.innerHTML;

Điều này cho phép bạn nhìn vào đánh dấu HTML của các nút nội dung của phần tử.

Lưu ý: Đoạn HTML hoặc XML được trả về được tạo dựa trên các nội dung hiện tại của phần tử, do đó, đánh dấu và định dạng của đoạn được trả về có thể không phù hợp với đánh dấu trang gốc. The returned HTML or XML fragment is generated based on the current contents of the element, so the markup and formatting of the returned fragment is likely not to match the original page markup.

Thay thế nội dung của một phần tử

Đặt giá trị của

document.body.innerHTML = "";

3 cho phép bạn dễ dàng thay thế các nội dung hiện có của một phần tử bằng nội dung mới.

Lưu ý: Đây là rủi ro bảo mật nếu chuỗi được chèn có thể chứa nội dung độc hại có khả năng. Khi chèn dữ liệu do người dùng cung cấp, bạn nên luôn luôn cân nhắc sử dụng

document.documentElement.innerHTML = `<pre>${document.documentElement.innerHTML.replace(/</g,"&lt;")}</pre>`;

5, để vệ sinh nội dung trước khi được chèn. This is a security risk if the string to be inserted might contain potentially malicious content. When inserting user-supplied data you should always consider using

document.documentElement.innerHTML = `<pre>${document.documentElement.innerHTML.replace(/</g,"&lt;")}</pre>`;

5 instead, in order to sanitize the content before it is inserted.

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 thuộc tính

document.documentElement.innerHTML = `<pre>${document.documentElement.innerHTML.replace(/</g,"&lt;")}</pre>`;

6 của tài liệu:

document.body.innerHTML = "";

Ví dụ này tìm thấy sự đánh dấu HTML hiện tại của tài liệu và thay thế các ký tự

document.documentElement.innerHTML = `<pre>${document.documentElement.innerHTML.replace(/</g,"&lt;")}</pre>`;

7 bằng thực thể HTML

document.documentElement.innerHTML = `<pre>${document.documentElement.innerHTML.replace(/</g,"&lt;")}</pre>`;

8, do đó về cơ bản chuyển đổi HTML thành văn bản thô. Điều này sau đó được bọc trong một yếu tố

document.documentElement.innerHTML = `<pre>${document.documentElement.innerHTML.replace(/</g,"&lt;")}</pre>`;

9. Sau đó, giá trị của

document.body.innerHTML = "";

3 được thay đổi thành chuỗi mới này. Do đó, nội dung tài liệu được thay thế bằng hiển thị toàn bộ mã nguồn của trang.

document.documentElement.innerHTML = `<pre>${document.documentElement.innerHTML.replace(/</g,"&lt;")}</pre>`;

Chi tiết hoạt động

Chính xác thì điều gì xảy ra khi bạn đặt giá trị của

document.body.innerHTML = "";

3? Làm như vậy khiến tác nhân người dùng tuân theo các bước sau:

Giá trị được chỉ định được phân tích cú pháp là HTML hoặc XML (dựa trên loại tài liệu), dẫn đến một đối tượng
```
<ul id="list">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ul>
```
2 đại diện cho bộ nút DOM mới cho các phần tử mới.

Nếu phần tử có nội dung được thay thế là phần tử

<ul id="list">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ul>

3, thì thuộc tính

<ul id="list">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ul>

5 của phần tử

<ul id="list">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ul>

3 được thay thế bằng

<ul id="list">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ul>

2 mới được tạo trong bước 1.

Đối với tất cả các phần tử khác, nội dung của phần tử được thay thế bằng các nút trong

<ul id="list">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ul>

2 mới.

Nối HTML vào một phần tử

Đặt giá trị của

document.body.innerHTML = "";

3 cho phép bạn nối các nội dung mới vào một trong một phần tử hiện có.

Ví dụ: chúng ta có thể nối một mục danh sách mới (

<ul id="list">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ul>

9) vào danh sách hiện có (

const list = document.getElementById("list");

list.innerHTML += `<li><a href="#">Item ${list.children.length + 1}</a></li>`;

0):

HTML

<ul id="list">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ul>

JavaScript

const list = document.getElementById("list");

list.innerHTML += `<li><a href="#">Item ${list.children.length + 1}</a></li>`;

Xin lưu ý rằng sử dụng

document.body.innerHTML = "";

3 để nối các yếu tố HTML (ví dụ:

const list = document.getElementById("list");

list.innerHTML += `<li><a href="#">Item ${list.children.length + 1}</a></li>`;

2) sẽ dẫn đến việc loại bỏ bất kỳ trình nghe sự kiện được đặt trước đó. Đó là, sau khi bạn nối bất kỳ phần tử HTML nào theo cách bạn sẽ không thể nghe người nghe sự kiện đã đặt trước đó.

Cân nhắc về Bảo mật

Không có gì lạ khi thấy

document.body.innerHTML = "";

3 được sử dụng để chèn văn bản vào một trang web. Có khả năng để trở thành một vector tấn công trên một trang web, tạo ra rủi ro bảo mật tiềm năng.

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case

Mặc dù điều này có thể trông giống như một cuộc tấn công kịch bản chéo trang, nhưng kết quả là vô hại. HTML chỉ định rằng thẻ

const list = document.getElementById("list");

list.innerHTML += `<li><a href="#">Item ${list.children.length + 1}</a></li>`;

4 được chèn bằng

document.body.innerHTML = "";

3 không nên thực thi.

Tuy nhiên, có nhiều cách để thực hiện JavaScript mà không cần sử dụng các phần tử

const list = document.getElementById("list");

list.innerHTML += `<li><a href="#">Item ${list.children.length + 1}</a></li>`;

4, do đó vẫn có rủi ro bảo mật bất cứ khi nào bạn sử dụng

document.body.innerHTML = "";

3 để đặt các chuỗi mà bạn không có quyền kiểm soát. Ví dụ:

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert

Vì lý do đó, nên thay vì

document.body.innerHTML = "";

3 bạn sử dụng:

document.documentElement.innerHTML = `<pre>${document.documentElement.innerHTML.replace(/</g,"&lt;")}</pre>`;

5 để vệ sinh văn bản trước khi nó được chèn vào DOM.

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case

0 Khi chèn văn bản đơn giản, vì điều này chèn nó dưới dạng văn bản thô thay vì phân tích nó là HTML.

Ví dụ

Ví dụ này sử dụng

document.body.innerHTML = "";

3 để tạo cơ chế để đăng nhập tin nhắn vào một hộp trên trang web.

JavaScript

function log(msg) {
  const logElem = document.querySelector(".log");

  const time = new Date();
  const timeStr = time.toLocaleTimeString();
  logElem.innerHTML += `${timeStr}: ${msg}<br/>`;
}

log("Logging mouse events inside this container…");

Xin lưu ý rằng sử dụng

document.body.innerHTML = "";

3 để nối các yếu tố HTML (ví dụ:

const list = document.getElementById("list");

list.innerHTML += `<li><a href="#">Item ${list.children.length + 1}</a></li>`;

2) sẽ dẫn đến việc loại bỏ bất kỳ trình nghe sự kiện được đặt trước đó. Đó là, sau khi bạn nối bất kỳ phần tử HTML nào theo cách bạn sẽ không thể nghe người nghe sự kiện đã đặt trước đó.

Chúng tôi thêm một phương thức thứ hai ghi lại thông tin về các sự kiện dựa trên

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case

6 (chẳng hạn như

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case

7,

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case

8 và

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case

9):

function logEvent(event) {
  const msg = `Event <strong>${event.type}</strong> at <em>${event.clientX}, ${event.clientY}</em>`;
  log(msg);
}

Sau đó, chúng tôi sử dụng điều này làm trình xử lý sự kiện cho một số sự kiện chuột trên hộp có chứa nhật ký của chúng tôi:

const boxElem = document.querySelector(".box");

boxElem.addEventListener("mousedown", logEvent);
boxElem.addEventListener("mouseup", logEvent);
boxElem.addEventListener("click", logEvent);
boxElem.addEventListener("mouseenter", logEvent);
boxElem.addEventListener("mouseleave", logEvent);

HTML

HTML khá đơn giản cho ví dụ của chúng tôi.

document.body.innerHTML = "";

0

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert

0 với lớp

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert

1 chỉ là một thùng chứa cho mục đích bố trí, trình bày nội dung với một hộp xung quanh nó.

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert

0 có lớp là

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case

5 là bộ chứa cho chính văn bản nhật ký.

CSS

Các kiểu CSS sau đây nội dung ví dụ của chúng tôi.

document.body.innerHTML = "";

1

Kết quả

Nội dung kết quả trông như thế này. Bạn có thể thấy đầu ra vào nhật ký bằng cách di chuyển chuột vào và ra khỏi hộp, nhấp vào nó, v.v.

Thông số kỹ thuật

Sự chỉ rõ
Dom phân tích cú pháp và tuần tự hóa # Dom-innerhtml-innerhtml # dom-innerhtml-innerhtml

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

InnerHtml được sử dụng để làm gì?

Thuộc tính bên trong có thể được sử dụng để viết HTML động trên tài liệu HTML. Nó được sử dụng chủ yếu trong các trang web để tạo HTML động như mẫu đăng ký, mẫu bình luận, liên kết, v.v.to write the dynamic html on the html document. It is used mostly in the web pages to generate the dynamic html such as registration form, comment form, links etc.

Làm thế nào để InnerHTML hoạt động trong JavaScript?

InsideHTML là một thuộc tính của mọi yếu tố.Nó cho bạn biết những gì giữa các thẻ bắt đầu và kết thúc của phần tử và nó cũng cho phép bạn đặt nội dung của phần tử.Thuộc tính mô tả một khía cạnh của một đối tượng.Đó là một cái gì đó mà một đối tượng trái ngược với một cái gì đó mà một đối tượng làm.It tells you what is between the starting and ending tags of the element, and it also let you sets the content of the element. property describes an aspect of an object. It is something an object has as opposed to something an object does.

.Innerhtml trở lại là gì?

Thuộc tính bên trong 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.Làm thế nào nó hoạt động.Đầu tiên, hãy lấy phần tử với menu ID bằng phương thức getEuityById ().

Tại sao bên trong không hoạt động?

Mọi người có thể đấu tranh và phàn nàn về nội tâm không hoạt động.Những điều như vậy thường xảy ra do lỗi của con người, khi các chuỗi không được xác định một cách thích hợp hoặc có một số sai lầm trong mã JavaScript.human error, when strings are not appropriately defined, or there are some mistakes in JavaScript code.