jquery輸出html代碼的方法:1、直接輸出標(biāo)簽元素,代碼為【var form1 = "<form id=\\\\"myform\\\\" method=\\\\"post\\\\" >"】;2、輸出帶變量的標(biāo)簽元素,代碼為【var country =….】。
jquery輸出html代碼的方法:
形式一:直接輸出標(biāo)簽元素
1.采用轉(zhuǎn)義符號(hào)
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.采用單引號(hào)
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的模板字符量(不過(guò)我喜歡用模板字符串來(lái)稱呼這個(gè)。。。)
就是在前后都加上了一個(gè)( ` ),它中間就寫(xiě)你要輸出的東西,寫(xiě)標(biāo)簽就輸出標(biāo)簽,寫(xiě)\\\\n就表示換行,寫(xiě)變量的話是不會(huì)輸出變量代表的值,而是把變量的名字給輸出來(lái)。比如說(shuō)變量country的值為“中國(guó)”,那么它不會(huì)輸出中國(guó)這個(gè)值,而是country變量名,要輸出值的話請(qǐng)看 形式二。
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>`形式二:輸出帶變量的標(biāo)簽元素
1.采用轉(zhuǎn)義符號(hào)
var country = "中國(guó)";var table = "<table border=\\\\"1\\\\" style=\\\\"width:100%;\\\\">";table = "<caption>國(guó)家信息列表</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.采用單引號(hào)
var country = "中國(guó)";var table = \\\'<table border="1" style="width:100%;">\\\';table = \\\'<caption>國(guó)家信息列表</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的模板字符量(不過(guò)我喜歡用模板字符串來(lái)稱呼這個(gè)。。。)
輸出變量的值,比如上面說(shuō)到的country=“中國(guó)”,那么要怎么才可以輸出中國(guó)這個(gè)值呢?
其實(shí)可以用占位符來(lái)代表${ },括號(hào)中間的部分就寫(xiě)上你要輸出變量所代表的變量名稱。
var country = "中國(guó)";var table = `<table border="1" style="width:100%;">`;table = `<caption>國(guó)家信息列表</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>`;