DOM操作执行顺序

Question

代码笔链接：https://codepen.io/ajboi/pen/WNRwBoN

这就是我一直在做的：

1. 创建一个 div 元素。

    var newDiv = document.createElement('div')

2. 向其中添加类和 ID。

    // Add class
    newDiv.className = 'hello'
    
    // Add id
    newDiv.id = 'hello1'

3. 记录创建的元素。

    console.log(newDiv)

4. 创建一个文本节点。

    var newDivText = document.createTextNode('Hello World')

5. 记录文本节点。

    console.log(newDivText)

6. 将文本节点附加为 div 元素节点的子节点。

    newDiv.appendChild(newDivText)

7. 再次记录元素。

    console.log(newDiv)

8. 为这个 div 元素添加样式。

    newDiv.style.fontSize = '40px'

9. 将其插入到 DOM 中。

    container.insertBefore(newDiv, h1)

在执行第 3 步时，我既没有添加样式，也没有将文本节点作为子元素附加到元素中。然而，打印在控制台上的值对于第 3 步和第 8 步是相同的。这让我很困惑。为什么会发生这种情况？