Hướng dẫn get innerhtml of div angular - lấy innerhtml của div góc

Question

Trong phần TS,

Nội dung chính Show

Giới thiệu
Điều kiện tiên quyết
Bước 1 - Sử dụng getHTMLContent() { console.log(this.ce.nativeElement.innerHTML); } 9
Bước 2 - Hiểu những hạn chế
Sự kết luận
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
Làm thế nào sử dụng bên trong với thẻ div?
Chúng ta có thể sử dụng nội tâm trong góc không?
Làm cách nào để hiển thị HTML bên trong một liên kết góc?
.Innerhtml trở lại là gì?

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

Khi tôi viết bất cứ điều gì trong Div đầu tiên, InnerHTML tương ứng được an ủi đúng cách. Sau đó, nếu tôi viết một cái gì đó trong Div thứ hai, bảng điều khiển sẽ bị ghi đè bởi dữ liệu của DIV thứ nhất. Vui lòng đề xuất một cách để có được nội dung HTML của các trường riêng lẻ và để điều khiển chúng một cách riêng biệt.

Giới thiệu

Angular 2+ hỗ trợ một liên kết thuộc tính

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

7 sẽ hiển thị HTML. Nếu bạn sử dụng phép nội suy, nó sẽ được coi là một chuỗi.

Trong bài viết này, bạn sẽ được trình bày cách sử dụng

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

7 và một số cân nhắc cho việc sử dụng.

Điều kiện tiên quyết

Nếu bạn muốn theo dõi cùng với bài viết này, bạn sẽ cần:

Một số quen thuộc với nội suy góc và liên kết tài sản cũng có thể hữu ích.

Bước 1 - Sử dụng getHTMLContent() { console.log(this.ce.nativeElement.innerHTML); } 9

Với mục đích của bài viết này, giả sử bạn đang làm việc với một thành phần có chứa

export class ExampleComponent {
  htmlStr: string = 'Plain Text Example & Bold Text Example';
}

0 bao gồm hỗn hợp các thực thể và yếu tố HTML và các yếu tố HTML:

export class ExampleComponent {
  htmlStr: string = 'Plain Text Example & Bold Text Example';
}

Hãy cùng xem xét một mẫu sử dụng phép nội suy trên chuỗi này:

<div>{{ htmlStr }}div>

Sau khi biên dịch, mã này sẽ tạo ra kết quả:

Ví dụ văn bản đơn giản & amp; Ví dụ văn bản táo bạo

Các thực thể HTML và các yếu tố HTML không được hiển thị.

Bây giờ, hãy để Lừa xem xét một mẫu sử dụng thuộc tính

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

7 ràng buộc trên chuỗi này:

<div [innerHTML]="htmlStr">div>

Sau khi biên dịch lại, mã này sẽ tạo ra kết quả:

Ví dụ văn bản đơn giản & ví dụ văn bản táo bạoBold Text Example

Quan sát rằng các thực thể HTML và các yếu tố HTML được hiển thị.

Bước 2 - Hiểu những hạn chế

Kết xuất HTML thường có khả năng giới thiệu kịch bản trang web chéo (XSS). HTML được kết xuất có thể chứa các tập lệnh độc hại trình bày một vấn đề bảo mật.

Một phương pháp giải quyết XSS là bằng cách hạn chế các loại phần tử và thuộc tính HTML cho một tập hợp các phần tử và thuộc tính an toàn đã biết.

Đằng sau.

Lưu ý: Danh sách đầy đủ các phần tử và thuộc tính HTML được phê duyệt có thể được quan sát trong

export class ExampleComponent {
  htmlStr: string = 'Plain Text Example & Bold Text Example';
}

4. The full list of approved HTML elements and attributes can be observed in

export class ExampleComponent {
  htmlStr: string = 'Plain Text Example & Bold Text Example';
}

4.

Điều này sẽ hạn chế các giá trị

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

7 của bạn từ việc sử dụng các thẻ

export class ExampleComponent {
  htmlStr: string = 'Plain Text Example & Bold Text Example';
}

6 và

export class ExampleComponent {
  htmlStr: string = 'Plain Text Example & Bold Text Example';
}

7 và các thuộc tính

export class ExampleComponent {
  htmlStr: string = 'Plain Text Example & Bold Text Example';
}

8. Hãy ghi nhớ giới hạn này khi chọn sử dụng

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

7.

Sự kết luận

Trong bài viết này, bạn đã được giới thiệu về liên kết tài sản

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

7 trong góc 2+. Nó sẽ dẫn đến việc hiển thị đánh dấu HTML có trong một chuỗi.

Nếu bạn muốn tìm hiểu thêm về Angular, hãy xem trang chủ đề Angular của chúng tôi cho các bài tập và các dự án lập trình.

Thuộc tính

<div>{{ htmlStr }}div>

1

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

9 được hoặc đặt đánh dấu HTML hoặc XML có trong phần tử.
getHTMLContent() { console.log(this.ce.nativeElement.innerHTML); }
9 gets or sets the HTML or XML markup contained within the element.

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

<div>{{ htmlStr }}div>

3.

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

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

9 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ệ

<div>{{ htmlStr }}div>

5

<div>{{ htmlStr }}div>

6

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

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

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

<div>{{ htmlStr }}div>

8

<div>{{ htmlStr }}div>

6

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à

<div [innerHTML]="htmlStr">div>

0.

Ghi chú sử dụng

Thuộc tính

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

9 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

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

9 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

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

9 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

<div [innerHTML]="htmlStr">div>

4, để 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

<div [innerHTML]="htmlStr">div>

4 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

<div [innerHTML]="htmlStr">div>

5 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ự

<div [innerHTML]="htmlStr">div>

6 bằng thực thể HTML

<div [innerHTML]="htmlStr">div>

7, 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ố

<div [innerHTML]="htmlStr">div>

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

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

9 đượ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 = `${document.documentElement.innerHTML.replace(/</g,"<")}`;

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

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

9? 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
```
let contents = myElement.innerHTML;
```
1 đạ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ử
```
let contents = myElement.innerHTML;
```
2, thì thuộc tính
```
let contents = myElement.innerHTML;
```
4 của phần tử
```
let contents = myElement.innerHTML;
```
2 được thay thế bằng
```
let contents = myElement.innerHTML;
```
1 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
```
let contents = myElement.innerHTML;
```
1 mới.

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

Đặt giá trị của

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

9 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 (

let contents = myElement.innerHTML;

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

let contents = myElement.innerHTML;

9):

HTML

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

JavaScript

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

list.innerHTML += `Item ${list.children.length + 1}`;

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

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

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

document.body.innerHTML = "";

1) 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

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

9 đượ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.

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

0

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ẻ

export class ExampleComponent {
  htmlStr: string = 'Plain Text Example & Bold Text Example';
}

6 được chèn bằng

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

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

export class ExampleComponent {
  htmlStr: string = 'Plain Text Example & Bold Text Example';
}

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

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

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

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

1

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

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

9 bạn sử dụng:

```
<div [innerHTML]="htmlStr">div>
```
4 Để vệ sinh văn bản trước khi nó được chèn vào DOM.
```
document.body.innerHTML = "";
```
9 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

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

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

JavaScript

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

2

Hàm

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

1 tạo ra đầu ra nhật ký bằng cách nhận thời gian hiện tại từ đối tượng

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

2 bằng cách sử dụng

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

3 và xây dựng một chuỗi với dấu thời gian và văn bản tin nhắn. Sau đó, thông báo được gắn vào hộp với lớp

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

4.

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

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

5 (chẳng hạn như

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

6,

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

7 và

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

8):

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

3

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:

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

4

HTML

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

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

5

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

9 với lớp

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

0 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ó.

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

9 có lớp là

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

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

getHTMLContent() {
    console.log(this.ce.nativeElement.innerHTML);
  }

6

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

Làm thế nào sử dụng bên trong với thẻ div?

Sử dụng thuộc tính bên trong: Để sử dụng thuộc tính bên trong, trước tiên hãy chọn phần tử (div) nơi bạn muốn nối bộ mã.Sau đó, thêm mã được đặt kèm theo dưới dạng các chuỗi bằng toán tử += trên InsideHTML.first select the element (div) where you want to append the code. Then, add the code enclosed as strings using the += operator on innerHTML.

Chúng ta có thể sử dụng nội tâm trong góc không?

Angular 2+ hỗ trợ một liên kết thuộc tính [bên trong]] sẽ khiến HTML hiển thị.Nếu bạn sử dụng phép nội suy, nó sẽ được coi là một chuỗi.Trong bài viết này, bạn sẽ được trình bày cách sử dụng [InsideHTML] và một số cân nhắc cho việc sử dụng.. If you were to otherwise use interpolation, it would be treated as a string. In this article, you will be presented with how to use [innerHTML] and some considerations for usage.

Làm cách nào để hiển thị HTML bên trong một liên kết góc?

Nếu giá trị HTML chứa một thẻ, theo mặc định sẽ không hiển thị nó dưới dạng HTML.Nếu bạn cố gắng hiển thị một thẻ thông qua phép nội suy ({{&}}), Angular sẽ hiển thị giá trị dưới dạng văn bản.If you attempt to render a

programming html innerHTML Angular Angular dangerouslySetInnerHTML innerHTML

Bài Viết Liên Quan

Luân canh cây trồng là gì cho ví dụ năm 2024

Hướng dẫn get innerhtml of div angular - lấy innerhtml của div góc

Giới thiệu

Điều kiện tiên quyết

Bước 1 - Sử dụng getHTMLContent() { console.log(this.ce.nativeElement.innerHTML); } 9

Bước 2 - Hiểu những hạn chế

Sự kết luận

Giá trị

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ử

Chi tiết hoạt động

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

HTML

JavaScript

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

Ví dụ

JavaScript

HTML

CSS

Kết quả

Thông số kỹ thuật

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

Xem thêm

Làm thế nào sử dụng bên trong với thẻ div?

Chúng ta có thể sử dụng nội tâm trong góc không?

Làm cách nào để hiển thị HTML bên trong một liên kết góc?

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