如何將新創建的輸入附加到新創建的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>