jQuery-如何用标签包装输入标签

Question

我想用label和li标签包装输入标签。

<li><label><input type="checkbox" value="1">Apple</label></li>

<li><label><input type="checkbox" value="2">Banana</label></li>

<li><label><input type="checkbox" value="3">Orange</label></li>

但是，输出如下...

<li><label><input type="checkbox" value="1">Apple</input></label></li>

<li><label><input type="checkbox" value="2">Banana</input></label></li>

<li><label><input type="checkbox" value="3">Orange</input></label></li>

我无法移除 </input>

我的代码：

var foods = [{id:1, name:'Apple'},{id:2, name:'Banana'},{id:3, name:'Orange'}];

for(var f in foods) {

  var tag_input = $('<input type="checkbox">');

      tag_li = $('<li>')

      tag_label = $('<label>');

  tag_input.val(foods[f]['id']);

  tag_input.text(foods[f]['name']);

  var tag = tag_li.append(tag_label.append(tag_input))

  console.log(tag[0].outerHTML);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>