如何在 JavaScript 中安全地将原始 HTML 字符串附加到 DOM？

将原始 HTML 字符串转换为 DOM 元素以进行追加

JavaScript 提供了多种操作 HTML 内容的方法，包括修改DOM 元素。然而，有时需要将原始 HTML 字符串转换为 DOM 元素，以便与诸如appendChild()之类的方法一起使用。

使用 DOMParser

DOMParser 接口允许解析XML 和 HTML 字符串转换为 DOM 元素。要使用 DOMParser 将原始 HTML 字符串转换为 DOM 元素：

var xmlString = "<div><a href='#'>Link</a><span></span></div>";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");

parseFromString() 方法解析 HTML 字符串并返回包含解析后的 DOM 结构的 Document 对象。

访问 DOM 元素

访问已解析的单个 DOM 元素document:

console.log(doc.firstChild.innerHTML); // Outputs: <a href='#'>Link...</a>
console.log(doc.firstChild.firstChild.innerHTML); // Outputs: Link

用法

解析的 DOM 元素现在可以传递给appendChild()或用于其他 DOM 操作任务，例如：

var parentElement = document.getElementById("container");
parentElement.appendChild(doc.firstChild);

这将有效地将解析后的 H​​TML 字符串作为 DOM 元素附加到 #container element.

注意： 将appendChild() 与通过DOMParser 获取的已解析DOM 元素一起使用非常重要，而不是直接附加原始HTML 字符串，因为后者可能会导致安全漏洞。

以上是如何在 JavaScript 中安全地将原始 HTML 字符串附加到 DOM？的详细内容。更多信息请关注PHP中文网其他相关文章！