将文本转换为 HTML 的 JavaScript 方法

在 JavaScript 中，我们可以使用许多方法将文本转换为 HTML。下面是一些最常用的方法和示例。

1. 将文本插入 HTML 元素

要在 HTML 元素中插入文本，可以使用 innerHTML 属性。例如，如果您有一个 <div> 元素，那么可以使用以下代码将文本插入其中：

const myDiv = document.getElementById('myDiv');
myDiv.innerHTML = '<p>Hello World</p>';

上面的代码会将带有“Hello World”文本的 p 元素插入到具有 id 属性为“myDiv”的元素中。

2. 使用模板字符串创建 HTML 片段

模板字符串是一种新的 ES6 功能，它允许我们轻松地使用 JavaScript 创建 HTML 片段。例如，下面的代码将创建一个包含两个变量值的 p 元素：

const name = 'John';
const age = 30;

const htmlString = `<p>My name is ${name} and I'm ${age} years old.</p>`;

这将创建一个字符串，其中包含 name 和 age 变量的值，然后可以使用 innerHTML 属性将其插入到 HTML 元素中。

3. 转义 HTML 特殊符号

如果您要将文本输出到 HTML 中，您需要确保 HTML 中的特殊字符（如 < 和 &）被正确转义，以避免在 HTML 中引起错误。为此，您可以使用 innerText 属性而不是 innerHTML 属性，该属性会自动将 HTML 特殊字符转义为实体。

例如，以下代码将使用 innerText 属性将文本插入到 div 元素中：

const myDiv = document.getElementById('myDiv');
myDiv.innerText = '<p>Hello World</p>';

注意，这将文本本身插入到 div 元素中，而不是将实际的 p 元素插入到其中。

4. 创建 DOM 元素

使用 createElement 方法可以在 JavaScript 中创建 HTML 元素。例如，以下代码将创建一个 p 元素，并将其添加到具有 id 属性为“myDiv”的元素中：

const myDiv = document.getElementById('myDiv');
const myParagraph = document.createElement('p');
myParagraph.textContent = 'Hello World';
myDiv.appendChild(myParagraph);

请注意，此代码不会将 HTML 字符串插入到 myDiv 元素中，而是使用 JavaScript 来创建实际的 p 元素，并将其插入到 myDiv 元素中。

这些是在 JavaScript 中将文本转换为 HTML 的一些常用方法。 无论您决定使用哪种方法来转换文本，都应该牢记正确地处理 HTML 特殊字符以及避免 XSS 攻击的方法。