[英]How to create html element <li> tag inside <ul>
我的 ul 标签中有 li 和 input,我想在 javascript 中生成和创建我自己的 html 标签。 到目前为止,这是我从默认 html 视图中得到的:
<ul id="my_list" class="ks-cboxtags" style="margin-left:80px; margin-top:-20px">
<li><input type="checkbox" id="checkboxOne"><label for="checkboxOne">valA</label></li>
<li><input type="checkbox" id="checkboxTwo"><label for="checkboxTwo">valB</label></li>
<li><input type="checkbox" id="checkboxThree"><label for="checkboxThree">valC</label></li>
</ul>
我的观点或伪代码是这样的:
temp_list = ["ValA","ValB","ValC"];
$.each(temp_list, function (i, item) {
console.log(item.proc_area); //-- need dynamic html tag here to be passed inside the ul tag
});
您可以在每次迭代中简单地append()
元素 ( li ) append()
到当前项。
演示:
var temp_list = ["ValA","ValB","ValC"]; $.each(temp_list, function (i, item) { $('#my_list').append($('<li>').html(`<label>${item}</label>`)); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="my_list" class="ks-cboxtags" style="margin-left:80px;"></ul>
var template = `<input type="checkbox" id="checkbox_{{counter}}"><label for="checkbox_{{counter}}">{{label}}</label>`; var temp_list = ["ValA", "ValB", "ValC"]; $.each(temp_list, function(i, item) { var values = { counter: i, label: item }; var parsedTemplate = template.replace(/{{(\\w+)}}/g, function(_,k){ return values[k]; }); $('#my_list').append($(`<li>${parsedTemplate}</li>`)); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="my_list" class="ks-cboxtags" style="margin-left:80px;"></ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.