刷新页面时Chrome控制台为何输出两种不同元素结果？

这是Chrome DevTools控制台的DOM元素展示机制导致的，核心原因是**console.log输出DOM元素时保存的是引用，而非快照**：

• 当你执行console.log(createItem(...))时，控制台并没有立刻把这个<div>元素的当前结构完整打印出来，只是存了一个指向该元素的引用。
• 只有当你点击展开控制台里的元素条目时，DevTools才会去读取这个元素的实时状态。
• 你的代码里虽然同步执行了添加子元素的操作，但页面刷新后的DOM渲染队列、或者可能存在的其他异步代码（哪怕没在你贴的代码里），会导致子元素挂载到<div>的时机和你展开控制台的时机出现差异：
  • 如果你展开时，所有子元素已经完成挂载，就会看到包含<li>、<button>、<i>的完整结构（对应你说的输出1）
  • 如果展开时，子元素还没完全挂载到DOM中，就会看到空的<div>（对应输出2）

要验证这个逻辑，可以改成输出元素的快照，比如把DOM结构转成JSON字符串再输出：

console.log(JSON.parse(JSON.stringify(createItem('Coffee', 'main', 'li classes', 'btn classes', 'i classes'))));

这样就能固定输出元素执行console.log时的状态，不会再出现随机变化。

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