页面渲染结果与控制台输出相反，求原因分析及修复方案

云原生阿岚

2026-7-3

问题原因与修复方案

问题1：渲染顺序反转的核心原因

你使用了insertAdjacentHTML("afterbegin", users)方法，它会把新生成的DOM元素插入到目标元素的最开头。第一次循环插入amyrobson的内容，第二次循环插入maxblagun的内容时，会把它放到amyrobson的前面，最终页面显示顺序就变成了maxblagun在前、amyrobson在后，和数组原有顺序完全相反。

而控制台的console.log是按循环顺序依次输出，所以看起来是正确的。

问题2：遍历逻辑错误

你用for...in遍历的是data对象（包含currentUser和comments两个属性），这种方式完全不适合处理数组。这次刚好循环两次取到了comments的两个元素，但如果后续data结构新增属性，代码会直接报错，逻辑完全不严谨。

修复后的代码

直接遍历data.comments数组，同时把插入方式改成beforeend（追加到body末尾），保持数组原有顺序：

fetch("test.json")
  .then((response) => response.json())
  .then((data) => showinfo(data));

function showinfo(data) {
  // 直接遍历comments数组，逻辑更清晰
  data.comments.forEach(comment => {
    const userHtml = `
    <div>
      <p>${comment.user.username}</p>
      <img src='${comment.user.image.png}' alt='${comment.user.username}'/>
    </div>
    `;
    // 用beforeend把元素追加到body末尾，保证顺序和数组一致
    document.querySelector("body").insertAdjacentHTML("beforeend", userHtml);
    console.log(comment.user.username);
  });
}