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
– Kokodoko, Commented Aug 10, 2022 at 10:12

Manivannan · Accepted Answer · 2022-08-10 10:16:17Z

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, 2022 at 10:16

Manivannan

3,2843 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

zach Over a year ago

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?

Manivannan Over a year ago

If you want to handle as raw html then you should try as document.getElementById("sList").innerHTML += "<li>"+dynamicText +"</li>", not required to create Dom obj for li

zach Over a year ago

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?

Manivannan Over a year ago

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)

Collectives™ on Stack Overflow

Adding TextNode to HTML element with appendChild()

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related