Как не писать jquery внутри HTML?Альтернатива, чтобы написать приложение в чистом JavaScript для этого кода? - PullRequest
Новая
       21

Как не писать jquery внутри HTML?Альтернатива, чтобы написать приложение в чистом JavaScript для этого кода?

0 голосов
/ 11 февраля 2019

Код прекрасно работает с jquery append, но в jquery слишком много html, что снижает производительность.Можете ли вы, ребята, сказать мне, как сделать это без HTML внутри JQuery, но оптимизировать его в чистом 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>, но есть ли альтернатива не писать html внутри jquery, пожалуйста, если у вас есть другие варианты?

...