Как создать тег html element <li>внутри <ul>

Question

У меня есть li и входные данные внутри моего тега ul, и я хочу сгенерировать и создать свой собственный тег html в javascript. Итак, вот что я получил из моего 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                    
});

Answer 1

Вы можете просто append() элемент ( li ) в каждой итерации с текущим item .

Демо:

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>

Answer 2

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>