使用 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
});