如何不在html内编写jquery？另一种方法是用纯JavaScript编写此代码的append？

Question

该代码可与jquery附加程序完美配合，但jquery中的HTML过多，这会降低性能。 你们能告诉我如何在jquery中不使用html而是在纯JavaScript中对其进行优化。在从模式提交中填充前面的数据之后，我必须在<li>内附加<ul>。

HTML：

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

jQuery：

          $(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？