Question

我很想知道很久以来是否有一种使用jQuery构建HTML的好方法。

在乞讨中，我曾经做过类似的事情：

＆＃13;

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");

＆＃13;

然后我改成了这样的事情：

＆＃13;

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)
              )
            );

＆＃13;

我在想，有没有更好的方法呢？我的团队总是对我用来做的事情感到困惑，没有任何改变。

谢谢你们。

Answer 1

从表现的角度来看，老实说，除非你在短时间内产生数百/数千个元素，否则我认为这很重要。我认为更重要的考虑因素是可维护性。

如果要从代码构建大量HTML，强烈建议您使用模板库来实现可维护性。这将允许您将UI与代码分离，并使用简单的模型/视图方法生成组件。我过去使用过的一些很棒的JavaScript模板库包括：

如果您无法使用模板库，那么老实说，您的团队可以根据自己喜欢的格式拨打电话。我个人更喜欢jQuery方法，因为它可以在将来更容易修改，同时最大限度地降低制作一些难以定位的HTML语法错误的风险，这些错误可能会在以后困扰您。

Answer 2

Benchmarking表明$(document.createElement('div'));可能是创建元素的最快方法，在创建元素之后，你可以将它附加到DOM上的任何元素

有没有一种正确的方法来通过jQuery构建HTML

2 个答案: