如何使用Javascript将<li>中的新复选框添加到<ul>

如何解决如何使用Javascript将<li>中的新复选框添加到<ul>

我有一个包含五个项目的 li 选择复选框，我想使用 javascript 附加另一个项目

<div class="form-group">
  <label for="exampleSelect1" class="form-label mt-4">Sub Type</label><br>
  <div id="list1" class="dropdown-check-list" tabindex="100">
    <span class="anchor">Select Fund Type</span>
    <ul class="items">
      <li><input value="1" type="checkBox" /> Apple </li>
      <li><input value="1" type="checkBox" /> banana </li>
      <li><input value="1" type="checkBox" /> tomato </li>
      <li><input value="1" type="checkBox" /> loment </li>
      <li><input value="1" type="checkBox" /> nut </li>

    </ul>
  </div>
</div>

java 脚本文件

 var checkList = document.getElementById('list1');
                checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
                    if (checkList.classList.contains('visible'))
                        checkList.classList.remove('visible');
                    else
                        checkList.classList.add('visible');
                }

这是我需要做的。但这种方式不起作用

   $(function () {
                    $("select#ddsup_type").change(function () {
                        var sup_typeID = $(this).val();
                        $("select#ddfund_Type").empty();

                        $.getJSON(`/Home/FUND_TYPE?sid=${sup_typeID}`,function (data) {
                            $("select#ddfund_Type").empty();
                            
                            $.each(data,function (i,item) {
                                $("select#ddsup_type").append(`<li><input value="${item.value}" type="checkBox" /> ${item.text} </li>`);                               
                            });
                        });
                    })
                });