-
形式一:直接输出标签元素
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>';
3.采用es6的模板字符量(不过我喜欢用模板字符串来称呼这个。。。)
就是在前后都加上了一个( ` ),它中间就写你要输出的东西,写标签就输出标签,写\n就表示换行,写变量的话是不会输出变量代表的值,而是把变量的名字给输出来。比如说变量country的值为“中国”,那么它不会输出中国这个值,而是country变量名,要输出值的话请看 形式二。var form3 = `<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.采用转义符号
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>";
3.采用es6的模板字符量(不过我喜欢用模板字符串来称呼这个。。。)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>';
输出变量的值,比如上面说到的country=“中国”,那么要怎么才可以输出中国这个值呢?
其实可以用占位符来代表${ }
,括号中间的部分就写上你要输出变量所代表的变量名称。var country = "中国"; var table = `<table border="1" style="width:100%;">`; table += `<caption>国家信息列表</caption>`; table += `<thead><tr><th>ID</th><th>Nane</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/>";