JS如何将用户输入渲染为动态HTML

在前端交互场景中，我们常常需要把用户在输入框、文本域等组件中输入的内容，动态渲染到页面的指定位置，形成可交互的HTML内容。那么JS如何实现这个需求，又要注意哪些问题呢？

常见渲染方式对比

JS提供了多种方式来将内容渲染到页面，针对用户输入的场景，不同方式的表现和安全性差异很大，具体对比如下：

使用innerHTML渲染用户输入

innerHTML是最直接的渲染方式，它会把赋值的内容作为HTML解析后插入到元素中。但如果直接把用户输入的内容赋值给innerHTML，攻击者可以输入恶意脚本标签，触发XSS攻击。

下面的例子演示了直接使用的风险和简单的过滤思路：

// 获取用户输入和渲染容器
const userInput = document.getElementById('user-input').value;
const container = document.getElementById('render-container');

// 不安全的直接渲染，存在XSS风险
// container.innerHTML = userInput;

// 简单过滤特殊标签（仅示例，生产环境需要更完善的过滤方案）
function simpleFilter(input) {
  return input.replace(/<script.*?>.*?<\/script>/gi, '');
}
// 过滤后渲染，降低风险
container.innerHTML = simpleFilter(userInput);

使用textContent渲染用户输入

如果只需要展示用户输入的纯文本，不需要解析其中的HTML标签，使用textContent是最安全的选择，它会把内容作为纯文本处理，不会解析任何HTML标签，天然避免XSS风险。

const userInput = document.getElementById('user-input').value;
const container = document.getElementById('render-container');
// 纯文本渲染，无XSS风险
container.textContent = userInput;

使用insertAdjacentHTML渲染用户输入

insertAdjacentHTML可以指定内容插入到元素的位置，同样支持HTML解析，和innerHTML一样需要处理用户输入的安全性问题。

const userInput = document.getElementById('user-input').value;
const container = document.getElementById('render-container');
// 在容器末尾插入HTML内容，同样需要过滤用户输入
function safeFilter(input) {
  // 生产环境建议使用专业的HTML净化库，如DOMPurify
  const tempDiv = document.createElement('div');
  tempDiv.textContent = input;
  return tempDiv.innerHTML;
}
container.insertAdjacentHTML('beforeend', safeFilter(userInput));

安全注意事项

当需要渲染用户输入的HTML内容时，无论如何都不能直接将未处理的内容插入到页面中，建议采用以下方案：

• 如果是纯文本场景，优先使用textContent渲染
• 如果需要渲染富文本HTML，使用专业的HTML净化库（如DOMPurify）对用户输入的内容进行过滤，再使用innerHTML或insertAdjacentHTML渲染
• 避免信任任何用户输入的内容，所有用户输入都默认视为不可信数据

安全提示：永远不要直接使用未过滤的用户输入拼接HTML字符串，哪怕是内部系统的功能，也可能因为输入误触导致安全问题。

JS动态HTML用户输入渲染innerHTMLtextContent修改时间：2026-05-25 10:43:58