如何使用Java腳本在li中添加帶in的標籤跨度

Question

我正在使用java腳本（或JQuery）在一些標籤中創建標籤。以下是我希望獲得的最終輸出，並將一些值和id附加到該格式中。

<li class=" " > 
 
    <label for="SearchFr-option-0" title="" class="ui-lert ui-state-hover"> 
 
    <input id="ui-multi-Filter-option-0" name="multiselect_measureFilter" type="checkbox" 
 
     value="100" title="Input Tags" checked="checked"> 
 
    <span>Input Tags</span> 
 
    </label> 
 
</li>

我怎樣才能做到這一點。因爲我知道我可以使用 var dateSpan = document.createElement（'span'）; var listTag = document.createElement（'li'）; 但無法實現整個html格式的li標籤。你的建議更有價值。提前致謝。

Answer 1

您可以生成標記並追加到想要的UL ID。

var html = ''; 
 
html += '<li class=" " >'; 
 
html += '<label for="SearchFr-option-0" title="" class="ui-lert ui-state-hover">'; 
 
html += '<input id="ui-multi-Filter-option-0" name="multiselect_measureFilter" type="checkbox"value = "100" title = "Input Tags" checked="checked">'; 
 
html += '<span>Input Tags</span>'; 
 
html += '</label> </li>'; 
 
$('#appendtoUl').append(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id='appendtoUl'> 
 

 
</ul>

Answer 2

我已經使用jQuery的在這裏實現了輸出。您可以按照您的要求修改屬性和文本。

HTML

<li class=" " > 
    <label for="SearchFr-option-0" title="" class="ui-lert ui-state-hover"> 
    <input id="ui-multi-Filter-option-0" name="multiselect_measureFilter" type="checkbox" 
     value="100" title="Input Tags" checked="checked"> 
    <span>Input Tags</span> 
    </label> 
</li> 

<li class='list2'> 

</li> 

JS

var label = $("<label>fsfsdfsdf</label"); 
var span = $("<span>Input Tags</span>"); 
var input = $('<input id="ui-multi-Filter-option-0" name="multiselect_measureFilter" type="checkbox" value="100" title="Input Tags" checked="checked">'); 
$(".list2").append(label.append(input).append(span)); 

https://jsfiddle.net/6hdew40d/

Answer 3

這裏是你正在尋找：

var myList = document.createElement("li"); 
 
myList.className = " "; 
 
var myLabel = document.createElement("label"); 
 
myLabel.for = "SearchFr-option-0"; 
 
myLabel.title = ""; 
 
myLabel.className = "ui-lert ui-state-hover"; 
 
var myInput = document.createElement("input"); 
 
myInput.id = "ui-multi-Filter-option-0"; 
 
myInput.name = "multiselect_measureFilter"; 
 
myInput.type = "checkbox"; 
 
myInput.value = "100"; 
 
myInput.title = "Input Tags"; 
 
myInput.checked = "checked"; 
 
var mySpan = document.createElement("span"); 
 
var myTextNode = document.createTextNode("Input Tags"); 
 
mySpan.appendChild(myTextNode); 
 
myList.appendChild(myLabel); 
 
myList.appendChild(myInput); 
 
myList.appendChild(mySpan);

<li class=" " > 
 
    <label for="SearchFr-option-0" title="" class="ui-lert ui-state-hover"> 
 
    <input id="ui-multi-Filter-option-0" name="multiselect_measureFilter" type="checkbox" 
 
     value="100" title="Input Tags" checked="checked"> 
 
    <span>Input Tags</span> 
 
    </label> 
 
</li>