js如何输出html？JavaScript动态输出HTML内容（innerHTML）方法详解

在前端开发中，通过JavaScript动态输出HTML内容是常见的需求，比如根据接口返回的数据渲染列表、动态生成弹窗内容等，innerHTML是实现这一需求的核心属性之一。它是DOM元素的一个属性，用于获取或设置元素内部的HTML内容，通过修改该属性的值，就可以直接向页面中插入自定义的HTML结构。

innerHTML基本语法

innerHTML属于DOM元素的属性，使用方式非常简单，主要分为获取内容和设置内容两种场景。

获取元素内部HTML内容

通过读取元素的innerHTML属性，可以得到该元素内部所有的HTML字符串，包括标签和文本内容。

// 获取id为container的元素内部HTML内容
const container = document.getElementById('container');
const innerHTMLStr = container.innerHTML;
console.log(innerHTMLStr);

设置元素内部HTML内容

给innerHTML属性赋值一个HTML字符串，浏览器会自动解析该字符串并渲染对应的HTML结构，替换掉元素原本的内容。

// 向id为container的元素中动态输出HTML内容
const container = document.getElementById('container');
// 赋值后元素内部会渲染出一个h2标题和一个段落
container.innerHTML = '<h2>动态生成的标题</h2><p>这是通过js输出的段落内容</p>';

常见应用场景

动态渲染列表数据

当从后端接口获取到数组类型的数据后，可以通过拼接HTML字符串，再用innerHTML输出到页面中生成列表。

// 模拟接口返回的用户列表数据
const userList = [
  { id: 1, name: '张三', age: 25 },
  { id: 2, name: '李四', age: 28 },
  { id: 3, name: '王五', age: 22 }
];
const listContainer = document.getElementById('user-list');
// 拼接HTML字符串
let htmlStr = '<ul>';
userList.forEach(user => {
  htmlStr += `<li>用户ID：${user.id}，姓名：${user.name}，年龄：${user.age}</li>`;
});
htmlStr += '</ul>';
// 输出到容器
listContainer.innerHTML = htmlStr;

动态生成弹窗内容

在点击按钮触发弹窗时，可以通过innerHTML动态设置弹窗内部的提示内容，实现灵活的弹窗展示。

const openModalBtn = document.getElementById('open-modal');
const modalContent = document.getElementById('modal-content');
openModalBtn.addEventListener('click', function() {
  // 动态设置弹窗内容
  modalContent.innerHTML = '<p>操作成功！</p><button id="close-modal">关闭</button>';
  // 给动态生成的关闭按钮绑定事件
  document.getElementById('close-modal').addEventListener('click', function() {
    modalContent.innerHTML = '';
  });
});

注意事项

安全问题

如果innerHTML赋值的字符串包含用户输入的内容，且没有做转义处理，很容易引发XSS攻击。比如用户输入的内容包含<script>标签，就会被直接执行。

如果必须插入用户输入的内容，需要对特殊字符进行转义，将<转义为&lt;，>转义为&gt;，&转义为&amp;等。

// 转义用户输入的特殊字符，避免XSS攻击
function escapeHtml(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}
const userInput = '<script>alert("恶意代码")</script>';
const safeInput = escapeHtml(userInput);
container.innerHTML = `<p>用户输入内容：${safeInput}</p>`;

性能问题

频繁修改innerHTML会导致浏览器反复解析HTML、重新渲染页面，性能开销较大。如果需要多次更新内容，建议先拼接好完整的HTML字符串，再一次性赋值给innerHTML，减少渲染次数。

内容替换问题

innerHTML赋值时会完全替换元素原本的内部内容，如果需要追加内容而不是替换，可以结合原有的innerHTML拼接新的字符串：

// 追加内容而不是替换
container.innerHTML = container.innerHTML + '<p>新增的段落内容</p>';
// 也可以使用+=简写
container.innerHTML += '<p>新增的段落内容</p>';

innerHTMLJavaScript动态输出HTMLHTML渲染修改时间：2026-06-22 15:18:58