如何将新创建的输入附加到新创建的li元素

Question

我想动态地将<li>元素添加到<ul> 。但是每个<li>元素都应该在其中包含一个输入元素。 所以它们都应该是新创建并附加的。 有人能告诉我它是如何完成的

 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

您必须首先将新创建的输入附加到li元素。 然后将li附加到ul元素。 节点类型文本也应采用字符串形式：

尝试以下方式：

 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

以将li附加到ul方式相同，可以使用appendChild将input放入li 。 此外，您的代码存在一些问题：

• element.type = text; 应该是element.type = "text"; 。
• id="first"没有ul ，我想你的意思是用id="start"来定位ul 。

 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

只有在你的代码一些指点，你追加node变量为无现有元素具有id first ，那么你只只需要追加element变量的node变量然后将其附加到主<ul> 而且text也没有定义。

我希望这有帮助。

 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

没有按钮

 <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

首先你应该创建你的LI元素，然后创建一个INPUT元素并将input元素添加到创建的LI元素，最后将包含输入元素的LI元素追加到UL元素，你可以使用这个代码

    <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>