Question

我有一个工作表单，可以将新列表项添加到列表中。但我的项目应该是DIV内的复选框。有没有办法实现这个目标？

$("#addcheckbox").click(function() {
  var z = document.getElementById('newcheckbox').value;
  var entry = document.createElement('li');
  entry.appendChild(document.createTextNode(z));
  entry.className = 'list-group-item';
  $("ul#groceries").append(entry);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group" id="groceries">
  <li class="list-group-item">
    <div class="checkbox">
      <label>
        <input type="checkbox"> Bread
      </label>
    </div>
  </li>

  <li class="list-group-item">
    <div class="checkbox">
      <label>
        <input type="checkbox"> Apples
      </label>
    </div>
  </li>
</ul>

Answer 1

你应该只使用追加：

$("#addcheckbox").click(function() {
  $("#groceries").append('<li class="list-group-item"><div class="checkbox"><input type="checkbox"> Bread</div></li>');
});

append参数可以是引号中的任何html

另一个例子：

＆＃13;

var arr= ['bread', 'apples', 'eggs'];
var i = 0;
$("#addcheckbox").click(function() {
    $("#groceries").append('<li class="list-group-item"><div class="checkbox"><input type="checkbox">' + arr[i] + '</div></li>');
    i++;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addcheckbox">Add checkbox</button>
<p>List:</p>
<ul id="groceries"></ul>

＆＃13;

Answer 2

只需使用jQuery函数创建要插入的元素并将它们附加到列表中。如果您的条目中有动态内容，请使用jQuery的text（）来防止编码问题。

$("#addcheckbox").on("click", function() {
  var $entry = $('<li class="list-group-item"><div class="checkbox"><label><input type="checkbox"> <span></span></label></div></li>');
  $entry.find("label span").text($('#newcheckbox').val());
  $("ul#groceries").append($entry);
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group" id="groceries">
  <li class="list-group-item">
    <div class="checkbox">
      <label>
        <input type="checkbox"> Bread
      </label>
    </div>
  </li>

  <li class="list-group-item">
    <div class="checkbox">
      <label>
        <input type="checkbox"> Apples
      </label>
    </div>
  </li>
</ul>

<input type="text" id="newcheckbox" value="New Checkbox"><button id="addcheckbox">Add</button>

DOM在列表javascript中添加带div的复选框

2 个答案: