字符串到 HTML JavaScript 反应 - JavaScript

在 JavaScript 中，我们经常需要将字符串转换为 HTML 元素或反向操作。这对于动态创建和操作网页元素非常有用。本文将介绍如何在 JavaScript 中进行这些操作。

字符串到 HTML 元素

有两种主要方法可以将字符串转换为 HTML 元素。一种方法是使用 innerHTML，另一种方法是使用 createElement。

使用 innerHTML

innerHTML 是所有 HTML 元素的属性，它包含在该元素中的所有 HTML 代码。可以使用它将字符串转换为 HTML 元素，如下所示：

const myString = '<div>Hello world!</div>';
const container = document.getElementById('container');
container.innerHTML = myString;

这将创建一个包含字符串 myString 中的 HTML 代码的 div 元素，并将其添加到 id 为 container 的元素中。

使用 createElement

另一种创建 HTML 元素的方法是使用 createElement。这种方法需要在 JavaScript 中创建所有元素，然后将它们添加到文档中。

const myString = '<div>Hello world!</div>';
const container = document.getElementById('container');
const div = document.createElement('div');
div.innerHTML = myString;
container.appendChild(div);

这将创建一个 div 元素，将它的 innerHTML 设置为 myString 中的代码，然后将它添加到 id 为 container 的元素中。

HTML 元素到字符串

要将 HTML 元素转换回字符串，可以使用 outerHTML 或 innerHTML。

使用 outerHTML

outerHTML 是一个元素的属性，它返回整个元素的 HTML 代码。可以将它与 getElementById 或 querySelector 等函数一起使用，以获取元素并将其转换回字符串。

有关用法，请参见下面的示例：

const container = document.getElementById('container');
const myString = container.outerHTML;
console.log(myString);

使用 innerHTML

如上所述，innerHTML 包含所有 HTML 元素的代码。如果要将单个元素转换为字符串，可以使用 innerHTML 属性。

有关用法，请参见下面的示例：

const container = document.getElementById('container');
const myString = container.innerHTML;
console.log(myString);

结论

在本文中，我们介绍了如何将字符串转换为 HTML 元素或将 HTML 元素转换回字符串。这些技术在动态创建和操作网页元素时非常有用。如果您对相关主题感兴趣，请查看 Manipulating Documents 中的更多信息。