字串轉 html-前端問答-PHP中文網

字串轉 html

王林

發布： 2023-05-21 14:18:38

原創

2358 人瀏覽過

在前端開發過程中，字串常被用來表示各種 HTML 標籤，例如網頁的標題、段落、連結等等。但是，當我們需要在 JavaScript 中動態產生網頁時，就需要將這些字串轉換成 HTML 程式碼。本文將介紹如何使用 JavaScript 技術實現字串轉 HTML。

使用 innerHTML 屬性

將字串轉換為 HTML 的最簡單方法是使用 innerHTML 屬性。這個屬性可用來將字串作為 HTML 程式碼插入到元素中。例如，以下程式碼可以將一個標題元素的文字內容設定為字串 "Hello World!"：

var title = document.createElement("h1");
title.innerHTML = "Hello World!";

登入後複製

我們也可以用相同的方式插入更複雜的 HTML 程式碼。例如，以下程式碼將建立一個包含段落、連結和圖像的元素：

var container = document.createElement("div");
container.innerHTML = `
  This is an example of a paragraph.
  This is an example of a link.
  
`;

登入後複製

請注意，使用 innerHTML 屬性需要謹慎，因為它可以使網頁容易受到跨網站腳本（XSS）攻擊。因此，我們應該始終對使用者輸入的資料進行嚴格的驗證和過濾。

使用 DOM 操作

除了 innerHTML 屬性外，我們還可以使用 DOM（文檔物件模型）操作手動建立和插入 HTML 元素。 DOM 操作的優點是可以精確控制產生的 HTML 程式碼的結構和樣式。

在 DOM 操作中，我們可以使用 createElement() 方法建立新的元素節點。例如，下面的程式碼將建立一個新的段落元素：

var paragraph = document.createElement("p");

登入後複製

然後，我們可以使用setAttribute() 方法來設定元素節點的屬性，如下所示：

paragraph.setAttribute("class", "example");

登入後複製

接下來，我們可以使用appendChild() 方法將新的元素節點新增至其他元素。例如，下面的程式碼將建立一個新的div 元素，並在其中加入兩個段落元素：

var container = document.createElement("div");
var paragraph1 = document.createElement("p");
var paragraph2 = document.createElement("p");

paragraph1.innerHTML = "This is the first paragraph.";
paragraph2.innerHTML = "This is the second paragraph.";

container.appendChild(paragraph1);
container.appendChild(paragraph2);

登入後複製

如上所示，我們也可以使用innerHTML 屬性將字串轉換為HTML，但我們可以先使用手動建立和操作元素節點來掌握DOM 操作的基本原理和技術。

使用模板字串

ES6 新增了模板字串（Template Strings），它是一種特殊類型的字串，可以使用佔位符插入變量，如下所示：

var name = "Alice";
var message = `Hello, ${name}!`;

登入後複製

在模板字串中使用HTML 標記，則可以將字串轉換成HTML 程式碼。例如，以下程式碼將建立一個包含變數和靜態文字的段落元素：

var name = "Alice";
var paragraph = `
  Hello, ${name}!
`;

登入後複製

我們可以使用模板字串來動態地產生 HTML 內容，並使用 DOM 操作將其插入網頁中。例如，以下程式碼將建立一個包含圖片和兩個連結的 div 元素：

var imgSrc = "https://example.com/img.jpg";
var link1 = { text: "Link 1", url: "https://example.com/link1" };
var link2 = { text: "Link 2", url: "https://example.com/link2" };

var container = document.createElement("div");
container.innerHTML = `
  
  ${link1.text}
  ${link2.text}
`;