Hướng dẫn how do you add a tag to a typescript string in html? - làm thế nào để bạn thêm một thẻ vào một chuỗi typecript trong html?

var bannerText = stringFormat("This is my {0}test content{1} here", "<b>", "</b>");
<div>
    <p> {para1}</p>
    <p> {bannerText}</p>
</div>

Thẻ HTML được in thay vì áp dụng chúng làm văn bản

Đầu ra quan sát

Đây là nội dung kiểm tra của tôi ở đây

Đầu ra cần thiết

Đây là nội dung kiểm tra của tôi ở đâytest content here

Hướng dẫn how do you add a tag to a typescript string in html? - làm thế nào để bạn thêm một thẻ vào một chuỗi typecript trong html?

Đầu ra cần thiết

Đơn giản là Ged11 gold badges31 silver badges40 bronze badges

7,72211 Huy hiệu vàng31 Huy hiệu bạc40 Huy hiệu đồngMar 27, 2019 at 4:26

Hướng dẫn how do you add a tag to a typescript string in html? - làm thế nào để bạn thêm một thẻ vào một chuỗi typecript trong html?

2

<div [innerHTML]="bannerText"></div>

Đã hỏi ngày 27 tháng 3 năm 2019 lúc 4:26

Tuy nhiên, hãy ghi nhớ các tài liệu của Angular về an ninh, trong đó nói Angular recognizes the value as unsafe and automatically sanitizes it, which removes the <script> tag but keeps safe content such as the <b> element..May 10, 2020 at 9:44

Hướng dẫn how do you add a tag to a typescript string in html? - làm thế nào để bạn thêm một thẻ vào một chuỗi typecript trong html?

Đã trả lời ngày 10 tháng 5 năm 2020 lúc 9:44

document.getElementById("name").innerHTML="This is <u>my test</u> sample"
<div id="name"></div>

Kiểm tra mã bên dưới nó có thể giúp bạn. Sử dụng bên trong

.Mar 27, 2019 at 4:31

Hướng dẫn how do you add a tag to a typescript string in html? - làm thế nào để bạn thêm một thẻ vào một chuỗi typecript trong html?

Đã trả lời ngày 27 tháng 3 năm 2019 lúc 4:31Bathri Nathan

Bathri Nathanbathri Nathan1 gold badge12 silver badges16 bronze badges

0

<div [innerHTML]="bannerText"></div>
0

9411 Huy hiệu vàng12 Huy hiệu bạc16 Huy hiệu đồng

Bất cứ phương pháp nào bạn đang sử dụng là thoát khỏi HTML, ví dụ: <div [innerHTML]="bannerText"></div> 1 / <div [innerHTML]="bannerText"></div> 2, v.v.

Sửa chữa

Bạn cần một số phiên bản của Set HTML.

ví dụ. React: <div [innerHTML]="bannerText"></div> 3, JS thuần túy: Sử dụng <div [innerHTML]="bannerText"></div> 4

Cảnh báo

Hãy cẩn thận, cài đặt HTML để lộ ứng dụng của bạn thành XSS: https://en.wikipedia.org/wiki/Cross-Site_ScriptingMar 27, 2019 at 4:29

Đã trả lời ngày 27 tháng 3 năm 2019 lúc 4:29basarat

Basaratbasarat54 gold badges439 silver badges496 bronze badges

Tạo phần tử HTML bằng cách sử dụng TypeScript #

Để tạo phần tử HTML trong TypeScript:

  1. Sử dụng phương thức
    <div [innerHTML]="bannerText"></div>
    
    5 để tạo phần tử.
  2. Đặt bất kỳ thuộc tính hoặc HTML bên trong trên phần tử được tạo.
  3. Thêm phần tử vào trang bằng phương thức
    <div [innerHTML]="bannerText"></div>
    
    6.

Đây là HTML cho các ví dụ trong bài viết này.

Copied!

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <div id="box"></div> <script src="./src/index.ts"></script> </body> </html>

Và đây là mã TypeScript liên quan.

Copied!

const el = document.createElement('div'); // ✅ Add text content to element el.textContent = 'Hello world'; // ✅ Or set the innerHTML of the element // el.innerHTML = `<span>Hello world</span>`; // ✅ (Optionally) Set Attributes on Element el.setAttribute('title', 'my-title'); // ✅ (Optionally) Set styles on Element // el.style.backgroundColor = 'salmon'; // el.style.color = 'white'; // ✅ add element to DOM const box = document.getElementById('box'); box?.appendChild(el);

Chúng tôi đã sử dụng phương thức tài liệu.CreateEement để tạo phần tử.

Tham số duy nhất chúng tôi chuyển sang phương thức là loại phần tử sẽ được tạo (

<div [innerHTML]="bannerText"></div>
7 trong ví dụ).

Phương thức

<div [innerHTML]="bannerText"></div>
8 trả về phần tử mới được tạo.

Bạn có thể sử dụng thuộc tính TextContent để đặt thuộc tính văn bản của phần tử hoặc bên trong để đặt đánh dấu HTML bên trong của phần tử.

Dưới đây là một ví dụ đặt HTML bên trong của phần tử.

Copied!

const el = document.createElement('div'); el.innerHTML = ` <span style="background-color: salmon; color: white;"> Hello world </span> `; // ✅ (Optionally) Set Attributes on Element el.setAttribute('title', 'my-title'); // ✅ (Optionally) Set styles on Element // el.style.backgroundColor = 'salmon'; // el.style.color = 'white'; // ✅ add element to DOM const box = document.getElementById('box'); box?.appendChild(el);

Tôi đã sử dụng BackTicks `` (không phải trích dẫn đơn) để bọc chuỗi HTML, vì BackTicks cho phép chúng tôi dễ dàng tạo một chuỗi nhiều dòng.

Bạn không nên sử dụng thuộc tính

<div [innerHTML]="bannerText"></div>
4 với dữ liệu được người dùng cung cấp mà không cần thoát nó. Điều này sẽ để ứng dụng của bạn mở cho các cuộc tấn công kịch bản chéo trang.

Nếu bạn cần đặt các thuộc tính trên phần tử, hãy sử dụng phương thức SetAttribution.

Phương thức

document.getElementById("name").innerHTML="This is <u>my test</u> sample"
0 mất 2 tham số:

  1. document.getElementById("name").innerHTML="This is <u>my test</u> sample"
    1 - Tên của thuộc tính có giá trị sẽ được đặt.
  2. document.getElementById("name").innerHTML="This is <u>my test</u> sample"
    2 - Giá trị gán cho thuộc tính.

Trong ví dụ, chúng tôi đặt giá trị của thuộc tính

document.getElementById("name").innerHTML="This is <u>my test</u> sample"
3 của phần tử thành
document.getElementById("name").innerHTML="This is <u>my test</u> sample"
4.

Copied!

const el = document.createElement('div'); el.innerHTML = ` <span style="background-color: salmon; color: white;"> Hello world </span> `; el.setAttribute('title', 'my-title'); // ✅ add element to DOM const box = document.getElementById('box'); box?.appendChild(el);

Nếu thuộc tính đã tồn tại, giá trị được cập nhật, nếu không một thuộc tính mới được thêm vào với tên và giá trị được chỉ định.

Bạn có thể đặt các kiểu trên phần tử bằng cách đặt các thuộc tính trên đối tượng

document.getElementById("name").innerHTML="This is <u>my test</u> sample"
5 của nó.

Copied!

const el = document.createElement('div'); el.innerHTML = ` <span> Hello world </span> `; el.style.backgroundColor = 'salmon'; el.style.color = 'white'; // ✅ add element to DOM const box = document.getElementById('box'); box?.appendChild(el);

Lưu ý rằng các thuộc tính đa từ được cưỡi lạc đà khi sử dụng đối tượng

document.getElementById("name").innerHTML="This is <u>my test</u> sample"
5.

Bạn có thể sử dụng phương thức Phụ lục để thêm phần tử vào trang.

Phương pháp thêm một nút vào cuối danh sách trẻ em của yếu tố mà nó được gọi.

Lưu ý rằng chúng tôi đã sử dụng toán tử chuỗi tùy chọn (?.) Trước khi truy cập phương thức

document.getElementById("name").innerHTML="This is <u>my test</u> sample"
7.

Các phép cắt chuỗi ngắn (?.) Các mạch ngắn mạch nếu tham chiếu là vô hiệu hóa (

document.getElementById("name").innerHTML="This is <u>my test</u> sample"
8 hoặc
document.getElementById("name").innerHTML="This is <u>my test</u> sample"
9).

Nói cách khác, nếu biến

<div id="name"></div>
0 lưu trữ giá trị
document.getElementById("name").innerHTML="This is <u>my test</u> sample"
8, chúng tôi sẽ không cố gắng gọi phương thức
document.getElementById("name").innerHTML="This is <u>my test</u> sample"
7 trên
document.getElementById("name").innerHTML="This is <u>my test</u> sample"
8 và gặp lỗi thời gian chạy.

Biến

<div id="name"></div>
0 có thể là
document.getElementById("name").innerHTML="This is <u>my test</u> sample"
8, bởi vì nếu phương thức
<div id="name"></div>
6 không tìm thấy một phần tử với
<div id="name"></div>
7 được cung cấp, nó sẽ trả về
document.getElementById("name").innerHTML="This is <u>my test</u> sample"
8.

Làm thế nào để bạn thêm thẻ trong TypeScript HTML?

Để tạo phần tử HTML trong TypeScript:..
Sử dụng tài liệu.phương thức createLeement () để tạo phần tử ..
Đặt bất kỳ thuộc tính hoặc HTML bên trong nào trên phần tử đã tạo ..
Thêm phần tử vào trang bằng phương thức appendChild () ..

Làm thế nào để bạn thêm một thẻ vào một chuỗi trong html?

Các phương thức EPPEND () & PREPEND () có thể được sử dụng để chèn chuỗi HTML bên trong một phần tử đã cho.Cả hai phương thức phân tích phân tích cho chuỗi HTML dưới dạng văn bản và tạo nút văn bản.Các phương thức này thoát các ký tự HTML trong chuỗi và có thể được sử dụng để chèn nội dung do người dùng không được giới thiệu trong trang.. Both methods parse given HTML string as text and create Text node. These methods escape HTML characters in the string and can be used to insert un-escaped user generated content in the page.

Bạn có thể sử dụng thẻ trong javascript không?

Thẻ trong HTML, mã JavaScript được chèn giữa và thẻ.