Adding TextNode to HTML element with appendChild()

Question

I am trying to create a simple "Shopping List" whereby the user types in the name of the items and then click the "add to List" button to add the items to the list, which it will appear in an ordered list manner. I create an li element for every item added to the list and then add the input value from the user to it through .innerText, then create a textNode out of li which I then append it to sList for it to appear in an ordered list manner.

However, the output I get is [object HTMLLIElement] added to sList instead and it is also not ordered. I think I have misunderstood some concepts about nodes. May I please know what I am doing wrong here?

<html>

<head>
    <title>Complete JavaScript Course</title>
    <style>
    </style>
</head>

<body>
    <div id="message">Complete JavaScript Course</div>
    <div>
        <input type="text" id="addItem">
        <input type="button" id="addNew" value="Add to List">
    </div>
    <div id="output">
        <h1>Shopping List</h1>
        <ol id="sList"> </ol>
    </div>
    <script>
        let button = document.querySelector("#addNew");
        button.addEventListener("click",addOne);
        function addOne(){
            let li = document.createElement("li");
            li.innerText = document.querySelector("#addItem").value;

            let node = document.createTextNode(li);
            document.getElementById("sList").appendChild(node);
        }
        
    </script>
</body>

</html>

You don't need `let node = createTextNode(li)`, you can just add the `li` element directly using `appendChild(li)` — Kokodoko, Aug 10 '22 at 10:12

score 0 · Answer 1 · answered Aug 10 '22 at 10:16

0

You do not need to create text node here

        function addOne(){
            let li = document.createElement("li");
            li.innerText = document.querySelector("#addItem").value;
            document.getElementById("sList").appendChild(li);
        }

<html>

<head>
    <title>Complete JavaScript Course</title>
    <style>
    </style>
</head>

<body>
    <div id="message">Complete JavaScript Course</div>
    <div>
        <input type="text" id="addItem">
        <input type="button" id="addNew" value="Add to List">
    </div>
    <div id="output">
        <h1>Shopping List</h1>
        <ol id="sList"> </ol>
    </div>
    <script>
        let button = document.querySelector("#addNew");
        button.addEventListener("click",addOne);
        function addOne(){
            let li = document.createElement("li");
            li.innerText = document.querySelector("#addItem").value;
            document.getElementById("sList").appendChild(li);
        }
        
    </script>
</body>

</html>

answered Aug 10 '22 at 10:16

Manivannan

3,074
3
21
32

Thanks for the answer! It works now. But I have another question, I tried experimenting with ```.innerHTML``` with ```document.getElementById("sList").innerHTML += li```, but it does not work. Isn't ```li``` already a HTML code by itself and thus adding it to the ```innerHTML``` of ```sList``` should allow the code to execute ```li``` as HTML code instead? With this method I got ```[object HTMLLIElement]``` as the output again. What am I missing here? – zach Aug 10 '22 at 10:36
If you want to handle as raw html then you should try as `document.getElementById("sList").innerHTML += "
"+dynamicText +"

Manivannan

Aug 10 '22 at 10:41

Thank you I understand it now. I have another question - why is a textNode not needed when I tried to use ```appendChild()```, doesn't that method have a node parameter? What is happening actually if I try to append a textNode instead of just the raw HTML of ```li```? – zach Aug 10 '22 at 10:51

If you want to use text node then you should create text node as `var textNode = document.createTextNode(document.querySelector("#addItem").value)` and append textNode to li `li.appendChild(textNode)` – Manivannan Aug 10 '22 at 11:06

1

I see, I get it now. Thank you so much for your help! :)) – zach Aug 10 '22 at 11:19

Adding TextNode to HTML element with appendChild()

1 Answers1