使用 Javascript 创建动态 ul答案

【问题标题】：creating a dynamic ul using Javascript使用 Javascript 创建动态 ul
【发布时间】：2021-01-17 05:42:44
【问题描述】：

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

之前

【问题讨论】：

您是否将脚本添加到 head 部分？如果是，请尝试在关闭

标签： javascript html

【解决方案1】：

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

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

【讨论】：