如何用insertAdjacentElement替代innerHTML插入JSON数据并规避XSS？

核心思路是遍历JSON的每个键值对，为每个项创建独立的DOM元素，通过textContent设置内容后逐个添加到页面容器，全程避免使用innerHTML，彻底规避XSS风险。

具体实现步骤 #

1. 准备示例JSON数据

const userData = {
  username: "前端开发者",
  email: "dev@example.com",
  location: "北京"
};

2. 获取页面上的目标容器

const targetContainer = document.getElementById("user-info");

3. 遍历键值对，创建独立标签并渲染

方式一：键和值分开用标签包裹（方便样式定制）

// 遍历JSON的所有键值对
for (const [key, value] of Object.entries(userData)) {
  // 创建每个项的外层容器
  const itemWrapper = document.createElement("div");
  itemWrapper.classList.add("info-item");

  // 创建键的标签
  const keyLabel = document.createElement("span");
  keyLabel.classList.add("info-key");
  keyLabel.textContent = `${key}：`;

  // 创建值的标签
  const valueText = document.createElement("span");
  valueText.classList.add("info-value");
  valueText.textContent = value;

  // 组装标签并添加到目标容器
  itemWrapper.appendChild(keyLabel);
  itemWrapper.appendChild(valueText);
  targetContainer.appendChild(itemWrapper);
}

方式二：单个标签包裹整个键值对（简化版）

for (const [key, value] of Object.entries(userData)) {
  const infoItem = document.createElement("p");
  infoItem.textContent = `${key}：${value}`;
  targetContainer.appendChild(infoItem);
}

方式三：用insertAdjacentElement插入（解决你之前的复用容器问题）

之前出现所有项进同一容器的问题，是因为你只创建了一个容器元素并重复往里加内容。正确做法是每次循环创建新元素：

for (const [key, value] of Object.entries(userData)) {
  const newItem = document.createElement("div");
  newItem.textContent = `${key}：${value}`;
  // 每次将新元素插入到目标容器的末尾
  targetContainer.insertAdjacentElement("beforeend", newItem);
}

关键注意点 #

• 所有内容通过textContent设置，浏览器会自动转义特殊字符，从根源避免XSS攻击。
• 每次循环都要创建新的DOM元素，而不是复用同一个元素容器，这样每个键值对都会有独立的标签包裹。

内容的提问来源于stack exchange，提问作者user26545514