时间戳

首页 > 解决方案 > 如何创建html元素

  • 里面的标签

    • javascript - 如何创建html元素
  • 里面的标签

      • 问题描述

      我的 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                    
});

      标签： javascriptjqueryhtmlhtml-lists

      解决方案

      您可以在每次迭代中简单地append()将元素 ( li ) 与当前项。

      演示：

      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>

      推荐阅读