如何在 JavaScript 中将 HTML 字符串转换为 DOM 元素？

从 HTML 字符串创建 DOM 元素

在 JavaScript 中，有时需要将 HTML 字符串转换为其相应的 DOM 元素。这是动态创建和操作页面内容的基本操作，例如将元素附加到文档时。

要完成此任务，您可以使用 DOMParser。使用 DOMParser 的语法是：

const doc = new DOMParser().parseFromString(htmlString, "text/xml");

这里，htmlString 表示您要转换的 HTML 代码，doc 是包含解析的 DOM 元素的结果文档。

例如，考虑以下 HTML 字符串：

<div>
    <a href="#"></a>
    <span></span>
</div>

使用 DOMParser，您可以将此字符串转换为 DOM元素如下：

const htmlString = "
";
const doc = new DOMParser().parseFromString(htmlString, "text/xml");

doc 对象现在将解析的 HTML 作为 DOM 元素保存，可以使用诸如appendChild()之类的方法将其附加到页面：

const parentElement = document.getElementById('parent');
parentElement.appendChild(doc.firstChild);

This会将解析后的 H​​TML 内容添加为实际 DOM 中的parentElement 的子元素。请注意，DOMParser 解释 XHTML 样式的 HTML，这需要结束标记，如上面的示例所示。

以上是如何在 JavaScript 中将 HTML 字符串转换为 DOM 元素？的详细内容。更多信息请关注PHP中文网其他相关文章！