javascript - 将ajax数据放入html并显示在页面上的最佳方法

Question

我正在通过 jquery/ajax/php get 加载相当多的 json 数据。当我获取数据时，我将其显示在弹出模式的一些表格中。我就是这样做的。

str1  = "<table class='line_item_order_info_table'>";
str1 += "<tr><td class='line_item_label' >";
str1 += "Order no.";
str1 += "</td></tr>";
str1 += "<tr><td class='line_item_data' id='order_number_td'>";
str1 += data.order_number;
str1 += "</td></tr>";
str1 += "</table>";

str1 += "</td>";
str1 += "<td>";

str1 += "<table class='line_item_order_info_table'>";
str1 += "<tr><td class='line_item_label'>";
str1 += "Order date";
str1 += "</td></tr>";
str1 += "<tr><td class='line_item_data'>";
str1 += data.order_date;
str1 += "</td></tr>";
str1 += "</table>";

//many, many more lines that look like this

$('#modal-div').html(str1);

这是通过 javascript 将这些数据放入 html 的最佳方法吗？像这样跟踪有点困难。这么多的 html，没有任何缩进以使其更易于阅读，查看或尝试在其中查找内容有点痛苦。

如果您能为我指出更好的策略，我将不胜感激!谢谢!

Answer 1

如果您绝对必须按照您所描述的方式编写 HTML，则只需在每行后面添加换行符即可。

var myHTML = '<div class="bleh"> \
     <ul class="bleh2"> \
         <li>'+ data.order_number +'</li> \
         <li>'+ data.order_date +'</li> \
     </ul> \
  </div>';