How do I check if the last dynamically created li element is filled in a ul before appending

Question

I am creating aa list dynamically , and the li elements have input type text inside. How do I check if the last created li element is empty or not.Because I dont want the user to unnecessarily create li elements.Currently I get the alert output as [object HTMLLIElement].I want to get the text entered. Thank you in advance.

                     function add_down(){

                       var node = document.createElement("LI");
                       var element = document.createElement("input");
                       element.type = 'text';
                       element.placeholder = "Enter name";
                       node.append(element);
                       var x = document.getElementById("start").lastChild;
                       alert(x);
                       document.getElementById("start").appendChild(node);

}

Answer 1

To get last li inner text in a ul you can do this:

html:

<ul id="list">
  <li><input type="text" /></li>
  <li><input type="input" /></li>
</ul>

click Me

javascript:

let list = document.getElementById("list")
let button = document.getElementById("click")

 button.addEventListener("click",function(){
 console.log(list.childNodes[list.childNodes.length-2].childNodes[0].value)
})

Here is a pen to check the code https://codepen.io/khanChacha/pen/byabQe?editors=1011