多段HTML拼接的优化处理

基础的系统中有个地方需要传一个HTML代码，这个HTML又是动态生成拼接的，但基本的结构知道。

原始的代码使用的是下面这样的字符串拼接：

var html = '';
  var SugCnt = JSONResult.SugCnt;
  var addlist= $("#sugAddressSet");
  html = '<table>';
  html = html + '<tr><td><DIV class="component EditorLabel"><LABEL class=PageTitle>Address Suggestions</LABEL></DIV></td></tr>';
  html = html + '<tr><td>&nbsp;</td></tr>';
  html = html + '<tr><td><DIV class="component EditorLabel"><LABEL class=AttentionColor>The Garage Address is incorrect. Please select one of the following options:</LABEL></DIV></td></tr>';
  html = html + '<tr><td>&nbsp;</td></tr>';
  html = html + '<tr><td>&nbsp;</td></tr>';

个人觉得太凌乱代码可读性和可维护性太差，于是改成下面这样：

var addhtml='<div><table><tbody><tr><td><div class="component EditorLabel"><label class="PageTitle">Address Suggestions</label></div></td></tr><tr><td>&nbsp;</td></tr><tr><td><div class="component EditorLabel"><label class="AttentionColor">The Garage Address is incorrect. Please select one of the following options:</label></div></td></tr><tr><td>&nbsp;</td></tr><tr><td>&nbsp;</td></tr><tr class="add1"><td><div class="component EditorRadio"><input  class="rad1" title="Please select address." value="0" type="radio" name="ASEL" onclick="CustomScript.SetAddrSugest(this);"/><span class="required"></span></div></td></tr><tr class="add1"><td>&nbsp;</td></tr><tr class="add2"><td><div class="component EditorRadio"><input class="rad2" title="Please select address." value="0" type="radio" name="ASEL" onclick="CustomScript.SetAddrSugest(this);"/><span class="required"></span></div></td></tr><tr class="add2"><td>&nbsp;</td></tr><tr class="add3"><td><div class="component EditorRadio"><input class="rad3" title="Please select address." value="0" type="radio" name="ASEL" onclick="CustomScript.SetAddrSugest(this);"/><span class="required"> </span></div></td></tr><tr class="add3"><td>&nbsp;</td></tr><tr><td>&nbsp;</td></tr></tbody></table></div>';
    
    var jqdom=$(addhtml);var add1=jqdom.find(".add1").first().find("input");    
    var addsp1=jqdom.find(".add1").first().find("span");
    add1.attr("sela","2709 Old Rosebud Rd");
    add1.attr("selc","Lexington");
    add1.attr("sels","KY");
    add1.attr("selz","40509-8559");
    addsp1.text("2709 Old Rosebud Rd Lexington KY 40509-8559");
    
    var add2=jqdom.find(".add2").first().find("input");    
    var addsp2=jqdom.find(".add2").first().find("span");
    add2.attr("sela","2709 Old Rosebud Rd");
    add2.attr("selc","Lexington");
    add2.attr("sels","KY");
    add2.attr("selz","40509-8559");
    addsp2.text("2709 Old Rosebud Rd Lexington KY 40509-8559");
    
    var add3=jqdom.find(".add3").first().find("input");    
    var addsp3=jqdom.find(".add3").first().find("span");
    add3.attr("sela","2709 Old Rosebud Rd");
    add3.attr("selc","Lexington");
    add3.attr("sels","KY");
    add3.attr("selz","40509-8559");
    addsp3.text("2709 Old Rosebud Rd Lexington KY 40509-8559");

个人感觉清晰了很多。