my list function doesn't work in javascript

Question

so i wrote this code that would create a list and then append an input to it on click. really simple. but the problem is it doesn't work and i have no idea why here is the code:

function pushing() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("inp").value;
  var pushchild = document.createTextNode(inputValue);
  li.appendChild(pushchild);
}

sub.addEventListener("click", pushing);

the id inp is an input id. thank you

Answer 1

Your list item is never appended to a list element.

 // Cache the elements, // add the button listener, // & focus on the input const list = document.querySelector('ul'); const input = document.querySelector('#inp'); const sub = document.querySelector('#sub'); sub.addEventListener('click', pushing); input.focus(); function pushing() { const li = document.createElement('li'); const text = document.createTextNode(input.value); li.appendChild(text); // Adding the list item to the list element list.appendChild(li); }

 <input id="inp" /> <button id="sub">Click</button> <ul></ul>

Answer 2

Add this to the last line of your function. Append your newly created li element to the ul.

document.querySelectorAll(‘ul’).appendChild(newCreatedLi);