Javascript 为什么我得到了'；无法读取属性'；追加儿童'；空值'；动态创建按钮时？

为什么这些按钮具有null属性而不是创建它们自己

Javascript代码：

let textAlignButtonsDiv = document.getElementById('textAlignButtonsDiv')
const textAlign = ['left', 'center', 'right']

function constructAlignButtons(textAlign) {
    for (let item of textAlign) {
        let button = document.createElement('button');
        button.textContent = item;
        textAlignButtonsDiv.appendChild(button);
    }
}

constructAlignButtons(textAlign);

Html代码：

<div id="textAlignButtonDiv"></div>

---

HTML中的按钮ID与代码中的不同

将其更改为：

而不是：

---

这可能意味着JS在

元素之前执行。将脚本移动到页面底部，然后关闭

标记。

textAlignButtonsDiv！==textAlignButtonDiv

（脚本中的复数按钮与标记中的单数按钮）投票以键入错误结束，而不是将其添加为答案