使用 TS 将 <li> 项附加到 <ul>

Question

我一直在尝试将“鳄梨”附加到此列表，但随后收到错误消息

未捕获类型错误：无法读取 null 的属性（读取 '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>

请问我哪里做错了？

Answer 1

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

tl；博士；在加载页面元素之前，您运行那 Javascript 。您可以将脚本放在结束 body 之前以规避此问题。

    <!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>

使用 TS 将 <li> 项附加到 <ul>

Appending <li> item to <ul> with TS

html

inline

list

typescript