使用 Javascript 创建动态 ul

Question

我正在尝试仅使用 javascript 动态创建一个li项目和 append 片段到ul 。 它是项目的一部分。 我写了一个代码，但每次控制台给我一个不同的错误，最后一个是“文档未定义”。 我需要知道我做错了什么。 我在控制台上遇到的错误是：1-getAttribute 不是 function。 2-文档未定义 3- appendChild 不是 function。 4-不能将Child附加到null

const nav_list= document.querySelectorAll("section");
const myUl = document.getElementById("navbar__list");
   // create fragment
let nav_fragment = document.createDocumentFragment();
 
function addItemList(){
    for (let i = 0; i < nav_list.length; i++){
        let newText= nav_list[i].getAttribute("data-nav");
        // creat new li
        let newLi= documnet.creatElement("li");
        // create new link
        let newLink= document.createElement ("a");
        // create text node
        let textNode = document.creatTextNode ("newText");

        // add eventListener
        newLink.addEventListener("click", function(){
            section[i].scrollIntoView({behavior : "smooth"});
        });
        newLink.appendChild(textNode);
        newLi.appendChild(newLink);
        nav_fragment.appendChild(newLi);      
  
    }
    myUl.appendChild(nav_fragment);
}
// Build menu
addItemList();

** 编辑：脚本标签添加在 html 之前的底部。

Answer 1

为确保文档已加载，请将您的脚本添加到触发DOMContentLoaded事件时调用的 function 中。

window.addEventListener('DOMContentLoaded', (event) => {
... your code here
});