typescript 中可以插入 html 語句，有兩種主要方法：使用模板字符串，優點是可以在 html 中動態插入 JavaScript 表達式值。使用 innerHTML 屬性，適合插入大量 html 代碼時，但要注意安全問題，未轉義的 html 代碼可能導致跨站點腳本 (xss) 攻擊。
typescript 中插入 HTML 語句
TypeScript 是一種編譯為 JavaScript 的語言，但它允許我們插入 HTML 代碼，以增強應用程序的交互性和可讀性。
如何插入 HTML 語句
有兩種主要方法可以在 TypeScript 中插入 HTML 語句：
立即學習“前端免費學習筆記（深入）”；
1. 使用模板字符串
let html = `<div> <h1>Hello World</h1> </div>`;
2. 使用 innerHTML 屬性
let element = document.getElementById('container'); element.innerHTML = "<div><h1>Hello World</h1></div>";
模板字符串
模板字符串使用反引號（`）包裹 HTML 代碼。此方法的優點是它允許我們使用 JavaScript 表達式在 HTML 中動態插入值。
let name = "John"; let html = `<div> <h1>Hello ${name}</h1> </div>`;
innerHTML 屬性
innerHTML 屬性允許我們直接將 HTML 字符串分配給元素的內容。此方法適用于需要將大量 HTML 代碼插入到元素中時。但是，要注意，使用 innerHTML 時存在安全問題，因為未轉義的 HTML 代碼可能會導致跨站點腳本 (XSS) 攻擊。
最佳實踐
為了安全性和可讀性，建議在 TypeScript 中使用模板字符串插入 HTML。使用 innerHTML 時，請務必對輸入進行適當的轉義。
示例
以下示例創建一個包含 Hello World 消息的簡單 Web 頁面：
// 使用模板字符串 let html = ` <html> <head><title>Hello World</title></head> <body> <h1>Hello World</h1> </body> </html> `; // 使用 `innerHTML` let element = document.getElementById('container'); element.innerHTML = ` <html> <head><title>Hello World</title></head> <body> <h1>Hello World</h1> </body> </html> `;
