JavaScript 字符串轉換成 DOM 在前端開發中，我們經常需要通過 JavaScript 將字符串轉換成實際的 DOM 元素，供頁面渲染顯示。此時，我們可以利用 JavaScript 提供的 innerHTML 和 Document.createElement 方法來完成這項操作。 innerHTML方法 innerHTML 方法可以接受字符串作為參數，將其解析成 DOM，并插入到指定元素的標簽里。下面是一個示例，展示了如何使用 innerHTML 方法將一個字符串轉換為一個段落 `

` 元素。

const str = "<p>這是一個段落</p>";  // < 和 > 用于轉義< 和 >const div = document.createElement('div');
div.innerHTML = str;
document.body.appendChild(div.firstChild);

以上代碼的執行結果是，在文檔的 body 元素中，插入了一個段落元素，其文本內容為“這是一個段落”。 createElement方法 createElement 方法可以接受一個元素標簽名稱作為參數，返回指定類型的空 DOM 元素。我們可以使用該方法創建一個 DOM 元素，然后為其設置屬性和文本節點。下面是一個示例，展示了如何使用 createElement 方法來創建一個段落元素。

const p = document.createElement('p');
const textNode = document.createTextNode("這是一個段落");
p.appendChild(textNode);
document.body.appendChild(p);

以上代碼的執行結果是，在文檔的 body 元素中，插入了一個段落元素，其文本內容為“這是一個段落”。 使用模板字符串 ES6 引入了模板字符串，可以使用反引號包裹字符串，并在其中嵌入表達式和常規文本。在實際項目中，我們常常使用模板字符串的方式來將字符串轉換為 DOM 元素。下面是一個示例，展示了如何使用模板字符串的方法來創建一個段落元素。

const text = "這是一個段落";
const p = `
<p>${text}</p>
`
const div = document.createElement('div');
div.innerHTML = p;
document.body.appendChild(div.firstChild);

以上代碼的執行結果與前一示例完全相同，它們都是將字符串轉換為一個段落元素，并插入到文檔的 body 元素里。 結論 以上幾種方法，全部都可以將字符串轉換成為 DOM 元素。雖然每種方法都能達到同樣的目的，但在實際開發中需要根據任務的性質和要求來選擇不同的方法，以達到最佳性能和可讀性。 使用 innerHTML 方法比較簡單眾所周知，但在某些情況下，可能會增加注入攻擊的風險，因為我們無法保證傳入的字符串中不會包含有害內容。因此，需要特別注意。 最后，我們建議在實際開發中，盡量采用使用createElement 或是模板字符串的方式來完成字符串轉換成 DOM 的操作。