Question

我想在ul下创建一个列表li，它有2个标签和1个文本框。当按钮使用JavaScript单击时，它应该在HTML中动态创建。由于我不知道Jquery，请用JavaScript告诉我。

Answer 1

我已经做了一个例子来帮助你。它不是最好的代码，但它可能会给你正确的想法以便走上正轨。 FIDDLE

＆＃13;

document.getElementById("createList").addEventListener("click", createList, false);
var items = document.getElementById("items");
var wrapper = document.getElementById("wrapper");
var ul = document.createElement("ul");

function createList() {
  items = parseInt(items.value);
  for (var i = 0; i < items; i++) {
    var label1 = document.createElement("label");
    label1.innerHTML = "Label 1";

    var label2 = document.createElement("label");
    label2.innerHTML = "Label 2";

    var input = document.createElement("input");
    input.setAttribute("type", "text");

    var div = document.createElement("div");
    div.appendChild(label1);
    div.appendChild(input);
    div.appendChild(label2);


    var li = document.createElement("li");
    li.appendChild(div);
    ul.appendChild(li);
  }

  wrapper.appendChild(ul);
}

＆＃13;

label {
  margin-left: 20px;
}
input {
  margin-left: 20px;
}

＆＃13;

<button id="createList">
  Create list
</button>
Amount of items:
<input type="text" id="items" />
<div id="wrapper">
</div>

＆＃13;

使用Button创建列表

1 个答案: