如何在不使用 InnerHTML 的情况下将 HTML 附加到容器元素？-js教程-PHP中文网

如何在不使用 InnerHTML 的情况下将 HTML 附加到容器元素？

Mary-Kate Olsen

发布： 2024-10-23 12:16:02

原创

945 人浏览过

How to Append HTML to Container Elements Without Using InnerHTML?

在没有 InnerHTML 的情况下将 HTML 附加到容器元素

当尝试将 HTML 附加到容器元素时，使用 innerHTML 可能并不理想，因为它的替换现有内容的趋势。要避免此问题，请考虑使用 insertAdjacentHTML() 方法。

insertAdjacentHTML() 可以更好地控制新 HTML 的位置。它需要两个参数：

Position: 指示应附加字符串的位置，可以选择“beforebegin”、“afterbegin”、“beforeend”或“afterend”。在这种情况下，您可以使用“beforeend”附加到容器元素的末尾。
HTML 字符串: 应添加的 HTML 内容。

用法示例：

var d1 = document.getElementById('one');
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');

登录后复制

此方法允许您附加 HTML，而无需创建额外的 span 标签或替换现有内容，从而提供更高效和一致的解决方案。

以上是如何在不使用 InnerHTML 的情况下将 HTML 附加到容器元素？的详细内容。更多信息请关注PHP中文网其他相关文章！