Dynamically append user input to an empty list


I am trying to recreate a nifty shopping list app that I found on w3schools in my own way, so I can understand it properly, but I can’t get my code to work! I seem to have got to the point where I am able to type text into the input field and press the button to add it to the list, but I think it is just adding the text back into the input field and not the list. I’m really not sure though.

Here is a link to the code on codepen:


And here is the code:

Click the button to add user input to the list


I would be extremely grateful for any advice, as I have been tinkering with this for ages now and it is driving me mad! I have searched stack overflow and countless other sites for an answer, but nothing seems to work when I try it.

Looking at the console I see this
Uncaught TypeError: userInput.appendChild is not a function

userInput is a string as you get it from here

var userInput = document.getElementById("input").value;

appendChild is a method for an html node, not for strings

Thank you Ieahleen, I changed appendChild to append and it works!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.