通过jQuery来输出html代码的技巧

---

• 形式一：直接输出标签元素
  1.采用转义符号
  var form1 = "<form id=\"myform\" method=\"post\">"
+"<input type=\"text\" name=\"uname\" style=\"height:20px;width:100%;\" />"
+"<input type=\"password\" name=\"pwd\" style=\"height:20px;width:100%;\" />"
+"</form>";
  2.采用单引号
  var form2 = '<form id="myform" method="post">'
+'<input type="text" name="uname" style="height:20px;width:100%;" />'
+'<input type="password" name="pwd" style="height:20px;width:100%;" />'
+'</form>';

---

• 形式二：输出带变量的标签元素
  1.采用转义符号
  var country = "中国";
var table = "<table border=\"1\" style=\"width:100%;\">";
table += "<caption>国家信息列表</caption>";
table += "<thead><tr><th>ID</th><th>Name</th></tr></thead>";
table += "<tbody><tr><td>1</td><td>"+country+"</td></tr></tbody>";
table += "</table>";
  2.采用单引号
  var country = "中国";
var table = '<table border="1" style="width:100%;">';
table += '<caption>国家信息列表</caption>';
table += '<thead><tr><th>ID</th><th>Name</th></tr></thead>';
table += '<tbody><tr><td>1</td><td>"'+country+'"</td></tr></tbody>';
table += '</table>';

---

使用注意：

对于喜欢使用单引号的，必须要注意一点，标签里的属性是包含多个属性的，因为这种情况，浏览器解析失败（语法错误），建议使用转义写法。例如下面的写法就是一个错误的写法，例：
var easyui += '<div class="easyui-progressbar" data-options="value:0,text:''"
data-percent="0" style="height: 22px;"><div/>';

这种写法在Chrome浏览器上会显示如下图的错误提示信息

错误分析：这种情况是需要避免的，因为属性data-options里包含好几个属性，属性里的多个属性也采用单引号来区分。
那么正确的写法应该是采用转义写法：
var easyui += "<div class=\"easyui-progressbar\"
data-options=\"value:0,text:\'\'\"
data-percent=\"0\" style=\"height: 22px;\"><div/>";