DOMにリスト内のdivでチェックボックスを追加するjavascript

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

あなたは追記のみ使用する必要があります。

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++; 
 
});

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

0：

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

アペンド引数は引用符

別の例では任意のHTMLかもしれ

Answer 2

あなたは自分のリストにそれらを挿入し、追加する要素を作成するjQueryの関数を使用jquery

$("#addcheckbox").click(function() { 
 
    if($("#newcheckbox").val().trim() == "") return; /* Return if no text */ 
 

 
    var text = '<li class="list-group-item"><div class="checkbox"><label><input type="checkbox"> ' + $("#newcheckbox").val() + ' </label></div></li>'; 
 
    $("ul#groceries").append(text); 
 
    $("#newcheckbox").val(""); /*Clear the text*/ 
 

 
});

<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"> 
 
<button id="addcheckbox" type="button">Add!</button>

Answer 3

でそれを行うことができます。エントリに動的コンテンツがある場合は、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>