How to append a newly created input to newly created li element

Question

I want to dynamically add <li> elements to a <ul> .But every <li> element should have a input element inside it. So both of them should be newly created and appended. Can someone tell me how it is done

 function add_down() { var node = document.createElement("LI"); var element = document.createElement("input"); element.type = text; element.placeholder = "Enter Name"; document.getElementById("first").appendChild(node); //how to append element to node } 

 <div style=""> <div> <ul id="start" style="list-style:none"> <li><input type="text" placeholder="category"></li> </ul> </div> <div><input type="button" value="Add" onclick="add_down()"></div> </div> 

Answer 1

You have to append the newly created input to the li element first. Then append that li to the ul element. Also node type text should be in the form of string:

Try the following way:

 function add_down() { var node = document.createElement("LI"); var element = document.createElement("input"); element.type = 'text'; element.placeholder = "Enter Name"; node.append(element); document.getElementById("start").appendChild(node); } 

 input[type=text]{ margin: 5px; } 

 <div style=""> <div> <ul id="start" style="list-style:none"> <li><input type="text" placeholder="category"></li> </ul> </div> <div><input type="button" value="Add" onclick="add_down()"></div> </div> 

Answer 2

In the same way you are appending the li to the ul , you can use appendChild to put the input in the li . Also, there are some issues with your code:

• element.type = text; should be element.type = "text"; .
• There's no ul with id="first" , I suppose you meant to target the ul with id="start" .

 function add_down() { var node = document.createElement("li"); var element = document.createElement("input"); element.type = "text"; element.placeholder = "Enter Name"; node.appendChild(element); // <-- append element to node document.getElementById("start").appendChild(node); } 

 <div style=""> <div> <ul id="start" style="list-style:none"> <li><input type="text" placeholder="category"></li> </ul> </div> <div><input type="button" value="Add" onclick="add_down()"></div> </div> 

Answer 3

function add_down() {
  var node = document.createElement("LI");
  var element = document.createElement("input");
  element.type = "text";
  element.placeholder = "Enter Name";
  node.appendChild(element)
  document.getElementById("start").appendChild(node);             
}

Answer 4

There are only few pointers in your code, your appending the node variable to a none existing element with an id first then you just only need to append the element variable to the node variable then append it to main <ul> . And also text whatsoever is not define.

I hope this helps.

 function add_down() { var node = document.createElement("li"); var element = document.createElement("input"); element.type = ""; //text is not define element.placeholder = "Enter Name"; node.appendChild(element); //Append the it to the node document.getElementById("start").appendChild(node); } 

 <div style=""> <div> <ul id="start" style="list-style:none"> <li><input type="text" placeholder="category"></li> </ul> </div> <div><input type="button" value="Add" onclick="add_down()"></div> </div> 

Answer 5

Without button

 <div style=""> <div> <ul id="start" style="list-style:none"> <li><input id='input1' type="text" placeholder="category" onchange="add_down()"></li> </ul> </div> </div> <script> document.getElementById("input1").focus() function add_down() { var node = document.createElement("li"); var element = document.createElement("input"); element.setAttribute("onchange", "add_down();"); element.type = "text"; element.placeholder = "Enter Name"; node.appendChild(element); // <-- append element to node document.getElementById("start").appendChild(node); element.focus(); } </script> 

Answer 6

First your should create your LI element and then create a INPUT element and add the input element to the created LI element and finally append the LI element which is contained the input element to the UL element you can use this code

    <script>
    function add_down() {
       var node = document.createElement("LI");
       var element = document.createElement("input"); 
       element.setAttribute('type', "text");
       element.setAttribute('placeholder', "Enter Name");
       node.appendChild(element);
       document.getElementById("start").appendChild(node);
    }
    </script>