使用innerHTML可直接插入HTML但有XSS风险；insertAdjacentHTML支持精准插入且性能更优；DOM API创建元素最安全，适合处理用户输入。

如果您希望在JavaScript中动态执行或插入HTML内容，通常是因为需要更新网页的结构或展示动态数据。以下是实现这一目标的具体方法：

一、使用innerHTML属性插入HTML内容

通过修改元素的innerHTML属性，可以直接将包含HTML标签的字符串插入到指定DOM元素中，浏览器会自动解析并渲染这些HTML代码。

1、选择目标DOM元素，例如使用document.getElementById获取一个元素对象。

2、为该元素的innerHTML属性赋值一段包含HTML标签的字符串。

立即学习“前端免费学习笔记（深入）”；

3、浏览器会自动解析并渲染新插入的HTML内容，替换原有内容。

注意：使用innerHTML可能带来XSS安全风险，应避免插入用户不可信的内容

二、使用insertAdjacentHTML方法精准插入

insertAdjacentHTML允许在指定元素的周围四个位置之一插入HTML字符串，不会重写整个元素内容，性能更优且控制更精确。

1、调用目标元素的insertAdjacentHTML方法，传入两个参数：位置和HTML字符串。

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

2、位置可选值包括"beforebegin"、"afterbegin"、"beforeend"、"afterend"，分别代表不同插入点。

3、浏览器将解析传入的HTML字符串，并按指定位置插入到DOM树中。

推荐使用此方法替代innerHTML以提高性能和安全性

三、通过DOM API创建并添加元素

使用document.createElement等方法逐个创建DOM节点，再通过appendChild等方法添加到页面中，是最安全的动态生成HTML的方式。

1、使用document.createElement("div")等形式创建新的HTML元素节点。

2、可选地为新元素设置属性、样式或事件监听器。

3、使用父元素的appendChild或insertBefore方法将其插入到文档中。

此方法完全避免了字符串拼接带来的安全问题，适合处理用户输入内容