javascript - 如何不在html中编写jquery？用纯 JavaScript 编写附加代码的替代方法？

Question

该代码与 jquery append 完美配合，但它在 jquery 中的 html 太多，它会降低性能。你们能告诉我如何在没有 html 的情况下在 jquery 中做到这一点，而是在纯 javascript 中对其进行优化。从模态提交中填充前面的数据后，我必须在<li>里面追加。<ul>

html:

     <ul class="select_div"></ul>

查询：

          $(function() {
        var count= 1;
        $('#btnSelect').click(function () {

               var append_div= '<li class="">' +
                '<div class="collapsible-header ">' +
                '<div class="col-md-8 p-0">' +
                '</div>' +
                '<div class="col-md-4 p-0">' +
                '</div>' +
                '</div>' +
                '<div class="collapsible-body pb-0">' +
                '<div class="row mb-0">' +
                '<div class="input-field col-md-6 col-sm-12 mt-3">' +
                '<input id="" type="text"  placeholder="" value="" class="validate custom-pt custom-mt" disabled>' +
                '<input type="hidden" name=""  value="">' +
                '<input type="hidden" name=""  value="">' +
                '<label for="doctor_name" class="ml-3 input-custom active">Name</label>\n' +
                '</div>' +
                '<div class="input-field col-md-6 col-sm-12 m-0">' +
                '<div class="form-group">' +
                '<label for="" class="m-0"></label>' +
                '<select class="select2" id="test'+count+'" name="" style="width:100%" multiple="multiple">' +
                '<option value=""></option>' +
                '<option value=""></option>' +
                '<option value=""></option>' +
                '<option value=""></option>' +
                ' </select>' +
                '<input type="hidden" name="">' +
                '</div>' +
                '</div>' +
                '<input id="" type="text"  placeholder="" name="" class="validate">' +
                '<label for="" class="ml-3 input-custom active">Profession</label>' +
                '</div>' +
                '</div>' +
                '<div class="row">' +
                '<div class="input-field col-md-3 col-sm-12 mt-3">' +
                ' <input id="" type="text"  placeholder="" value="" class="validate" disabled>' +
                '<input type="hidden" name=""  value="">' +
                '<label for="" class="ml-3 input-custom active">Phone</label>' +
                '</div>' +
                '<div class="input-field col-md-3 col-sm-12 mt-3">' +
                '<input id="" type="text"  placeholder="" value="" class="validate" disabled>' +
                '<input type="hidden" name=""  value="">' +
                '<label for="" class="ml-3 input-custom active">Mobile</label>' +
                '</div>' +
                ' <div class="input-field col-md-3 col-sm-12 mt-3">\n' +
                '<input id="" type="text"  placeholder="" value="" class="validate" disabled>' +
                '<input type="hidden" name=""  value="">' +
                '<label for="" class="ml-3 input-custom active">PHone 2</label>' +
                '</div>' +
                '<div class="input-field col-md-3 col-sm-12 mt-3">' +
                '<input id="" type="text"  placeholder="" value="" class="validate" disabled>' +
                '<input type="hidden" name=""  value="">' +
                '<label for="" class="ml-3 input-custom active">Email</label>' +
                '</div>' +
                '</div>' +
                '<div class="row">' +
                '<div class="input-field col-md-6 col-sm-12 mt-3">' +
                '<input id="" type="text" placeholder="" value="" class="validate" disabled>' +
                '<input type="hidden" name="" value="">' +
                '<label for="" class="ml-3 input-custom active">Number</label>' +
                '</div>' +
                ' <div class="input-field col-md-6 col-sm-12 mt-3">' +
                ' <input id="" type="text" placeholder="" value="" class="validate" disabled>' +
                '<input type="hidden" name=""  value="">' +
                ' <label for="" class="ml-3 input-custom active">City</label>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</li>';
                $('.select_div').append(append_doctor).show();
                count++;

<li>在这里，我动态追加，<ul>但如果您有其他选择，请在 jquery 中不写 html 的任何替代方法？