Question

我想将Predicate元素动态地添加到FilteredList中。但是每个Predicate元素中都应该有一个input元素。因此，它们两个都应重新创建并附加。有人可以告诉我怎么做

<li>

<ul>

Answer 1

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

尝试以下方式：

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";。
ul中没有id="first"，我想你打算用ul来定位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

您的代码中只有很少的指针，您可以将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元素并将输入元素添加到创建的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>

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

6 个答案:

没有按钮