如何在不使用“div.innerHTML = str;”的情况下安全地将 HTML 字符串附加到 DOM？

在不使用 div.innerHTML 的情况下将 HTML 字符串附加到 DOM

使用 div.innerHTML = str; 将 HTML 字符串附加到 DOM;可能很方便，但由于安全漏洞而不鼓励这样做。更安全、更可靠的方法是使用 insertAdjacentHTML() 方法。

使用 insertAdjacentHTML()

insertAdjacentHTML() 提供了一种将 HTML 字符串插入到DOM。它需要两个参数：

• position: 指定相对于目标元素插入 HTML 的位置。可以是“beforebegin”、“afterbegin”、“beforeend”或“afterend”。
• html: 要插入的 HTML 字符串。

在您的在这种情况下，将提供的 HTML 字符串附加到

中。通过 ID“test”，您可以使用以下代码：

<code class="javascript">const div = document.getElementById("test");
div.insertAdjacentHTML("beforeend", str);</code>

“beforeend”位置将在

的最后一个子元素之后插入 HTML。

浏览器兼容性

所有现代浏览器都支持 insertAdjacentHTML()，包括 Chrome、Firefox、Safari 和 Edge。

现场演示

如需演示，请访问以下 JSFiddle：http://jsfiddle.net/euQ5n/

以上是如何在不使用“div.innerHTML = str;”的情况下安全地将 HTML 字符串附加到 DOM？的详细内容。更多信息请关注PHP中文网其他相关文章！