Html 使用 TS 将
项目附加到

发布于05月16日

我一直在try 将"鳄梨"添加到此列表中，但随后我收到了错误消息

Uncaught TypeError: Cannot read properties of null (reading 'appendChild')

    <!DOCTYPE html >
    <html  lang="de">
    <head >
    <title >Am I Loaded ?! </title >
    <script>
        const element = document.getElementById("list")
        const elementText = document.createTextNode("Avocado")
        element.appendChild(elementText);
    </script>
    </head>
    <body>
    <h1>Meine Obstschale</h1>
    <ul id="list">
        <li >Apple </li >
        <li >Pear </li >
        <li >Orange </li >
        <li >Banana </li >
        </ul >
    </body >
    </html>

请问我做错了什么？

推荐答案

该错误告诉您，您正试图在空对象上调用成员函数appendChild.这不起作用，因为空对象上没有成员函数.在代码中，只调用appendChild一次，这意味着element是空对象.知道了这一点，您可以看到getElementById返回了空对象.您的ID不存在或尚未加载.

tl；博士在加载页面元素之前，您正在运行Javascript.

    <!DOCTYPE html >
    <html  lang="de">
    <head >
    <title >Am I Loaded ?! </title >
    
    </head>
    <body>
    <h1>Meine Obstschale</h1>
    <ul id="list">
        <li >Apple </li >
        <li >Pear </li >
        <li >Orange </li >
        <li >Banana </li >
    </ul >
    <script>
        const element = document.getElementById("list")
        const elementText = document.createTextNode("Avocado")
        element.appendChild(elementText);
    </script>
    </body >
    </html>