Appending
item to
with TS

Question

I have been trying to append "Avocado" to this list but then I get the error message

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>

What am I doing wrong here, please?

your script is running before your dom has loaded - either move it to the end of the page or put it in document ready function — Pete, May 16 '22 at 11:55

lupz · Accepted Answer · 2022-05-16T12:06:45.497

The error tells you that you are trying to invoke the member function appendChild on a null object. This does not work because there are no member functions on a null object. In your code you only invoke appendChild once, which means that element is that null object. Knowing this, you can see that getElementById returned that null object. Either your ID does not exist or it is not loaded yet.

tl;dr; You are running that Javascript before the elements of your page are loaded. You can place your script right before the closing body to circumvent this.

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

Appending item to with TS

1 Answers1

Appending
item to
with TS