JSON转HTML生成器appendChild错误挂载到前置元素而非父元素

我用JavaScript写了个从JSON生成HTML的工具，现在碰到个棘手问题：生成过程里，有些子元素通过appendChild()方法挂到了前一个元素上，没放到正确的父元素里。我已经试过断点调试，但还是搞不清为什么父元素会失效，导致挂载路径错了，求帮忙看看。

核心代码 #

// 递归创建DOM元素的函数
function buildElement(jsonNode) {
  const element = document.createElement(jsonNode.tag);
  
  // 处理元素文本
  if (jsonNode.text) {
    element.textContent = jsonNode.text;
  }
  
  // 处理子元素
  if (jsonNode.children && jsonNode.children.length > 0) {
    jsonNode.children.forEach(childNode => {
      const childElement = buildElement(childNode);
      element.appendChild(childElement);
    });
  }
  
  return element;
}

// 加载JSON并生成HTML
fetch('./structure.json')
  .then(res => res.json())
  .then(data => {
    const rootElement = buildElement(data);
    document.body.appendChild(rootElement);
  })
  .catch(err => console.error(err));

目标JSON结构 #

{
  "tag": "div",
  "children": [
    {
      "tag": "header",
      "children": [
        { "tag": "h1", "text": "页面标题" }
      ]
    },
    {
      "tag": "main",
      "children": [
        { "tag": "p", "text": "主内容段落" },
        { "tag": "ul",
          "children": [
            { "tag": "li", "text": "列表项1" },
            { "tag": "li", "text": "列表项2" }
          ]
        }
      ]
    },
    {
      "tag": "footer",
      "children": [
        { "tag": "span", "text": "页脚文本" }
      ]
    }
  ]
}

错误生成的HTML效果 #

实际生成的DOM结构（简化版）：

<div>
  <header>
    <h1>页面标题</h1>
    <main> <!-- 本该是div的子元素，却成了header的子元素 -->
      <p>主内容段落</p>
      <ul>...</ul>
      <footer> <!-- 同样错误挂载到main下 -->
        <span>页脚文本</span>
      </footer>
    </main>
  </header>
</div>

错误效果截图

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