使用innerHTML可直接插入HTML但有XSS风险；insertAdjacentHTML支持精准插入且性能更优；DOM API创建元素最安全，适合处理用户输入。
如果您希望在JavaScript中动态执行或插入HTML内容，通常是因为需要更新网页的结构或展示动态数据。以下是实现这一目标的具体方法：
通过修改元素的innerHTML属性，可以直接将包含HTML标签的字符串插入到指定DOM元素中，浏览器会自动解析并渲染这些HTML代码。
1、选择目标DOM元素，例如使用document.getElementById获取一个元素对象。
2、为该元素的innerHTML属性赋值一段包含HTML标签的字符串。
立即学习“前端免费学习笔记（深入）”；
3、浏览器会自动解析并渲染新插入的HTML内容，替换原有内容。
注意：使用innerHTML可能带来XSS安全风险，应避免插入用户不可信的内容
insertAdjacentHTML允许在指定元素的周围四个位置之一插入HTML字符串，不会重写整个元素内容，性能更优且控制更精确。
1、调用目标元素的insertAdjacentHTML方法，传入两个参数：位置和HTML字符串。
2、位置可选值包括"beforebegin"、"afterbegin"、"beforeend"、"afterend"，分别代表不同插入点。
3、浏览器将解析传入的HTML字符串，并按指定位置插入到DOM树中。
推荐使用此方法替代innerHTML以提高性能和安全性
使用document.createElement等方法逐个创建DOM节点，再通过appendChild等方法添加到页面中，是最安全的动态生成HTML的方式。
1、使用document.createElement("div")等形式创建新的HTML元素节点。
2、可选地为新元素设置属性、样式或事件监听器。
3、使用父元素的appendChild或insertBefore方法将其插入到文档中。
此方法完全避免了字符串拼接带来的安全问题，适合处理用户输入内容
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
963
收藏
