Есть ли способ построить HTML через jQuery

Question

Мне интересно, если долгое время есть хороший способ создания HTML с помощью jQuery.

В beggingin, я использовал, чтобы сделать такие вещи, как, что:

var content = ""; 
 
    var footer = ""; 
 
    content += "<div class=\"row\">"; 
 
    content += " <div class=\"col-md-10 col-md-offset-1\">"; 
 
    content += " <p class=\"lead\">Please, give a brief explanation about why you are canceling this appointment:</p>"; 
 
    content += " <textarea class=\"form-control\" id=\"deny_explanation\" placeholder=\"Brief explanation\" rows=\"8\"></textarea>" 
 
    content += " </div>"; 
 
    content += "</div>"; 
 
    footer += "<button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\"><i class=\"fa fa-remove\"></i> Close</button>"; 
 
    footer += "<a href=\"javascript: denyAppointment(" + appointment_id + "," + type + ");\" class=\"btn btn-danger\" ><i class=\"fa fa-thumbs-o-down\"></i> Cancel</a>"; 
 
    $("#generic_modal_title").html("Cancel appointment"); 
 
    $("#generic_modal_body").html(content); 
 
    $("#generic_modal_footer").html(footer); 
 
    $("#generic_modal").modal("show");

Тогда я изменил вещи, как это:

content = $('<div/>').append(
 
       $('<div/>').addClass('row').append(
 
       $('<div/>').addClass('col-md-10 col-md-offset-1').append(
 
        $('<h2/>').append('Client Info') 
 
       ) 
 
      ) 
 
      ).append(
 
       $('<div/>').addClass('row').append(
 
       $('<div/>').addClass('col-md-5 col-md-offset-1').append(
 
        $('<label/>').append('Client') 
 
       ).append($('<br>')).append(data.client.first_name + " " + data.client.last_name) 
 
      ).append(
 
       $('<div/>').addClass('col-md-5 col-md-offset-0').append(
 
        $('<label/>').append('Weeks pregnant') 
 
       ).append($('<br>')).append(data.client.weeks_pregnant) 
 
      ) 
 
      );

Мне было интересно, есть ли лучший способ сделать это? Моя команда всегда путается с тем, что я использую, и ничего не изменилось.

Спасибо, ребята.

Answer 1

С точки зрения эффективности я, честно говоря, не считаю это важным, если вы не генерируете сотни/тысячи этих элементов за короткий промежуток времени. Я думаю, что более важным соображением является ремонтопригодность.

Если вы создаете большое количество HTML-кода, настоятельно рекомендуется использовать библиотеку шаблонов для удобства обслуживания. Это позволит вам отделить свой пользовательский интерфейс от кода и сгенерировать компоненты с помощью простого подхода Model/View. Несколько большие библиотеки шаблонов для JavaScript, которые я использовал в прошлом, включают:

• https://github.com/janl/mustache.js
• http://handlebarsjs.com/
• https://code.google.com/p/kite/

Если вы не можете использовать библиотеку шаблонов, то это честно вверх чтобы ваша команда сделала звонок в том формате, который они предпочитают. Я лично предпочел бы подход jQuery, потому что он упростил бы модификацию в будущем, одновременно сведя к минимуму риск сделать синтаксическую ошибку в синтаксисе HTML, которая могла бы вернуться, чтобы преследовать вас позже.

Answer 2

Benchmarking показывает, что $(document.createElement('div'));, вероятно, самый быстрый способ создать элемент, после создания элемента и может добавить его к любому элементу на DOM