jquery如何輸出html代碼

小編給大家分享一下jquery如何輸出html代碼，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

jquery輸出html代碼的方法：1、直接輸出標簽元素，代碼為【var form1 = "<form id=\"myform\" method=\"post\" >"】；2、輸出帶變量的標簽元素，代碼為【var country =....】。

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>';

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.采用轉義符號

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>';

3.采用es6的模板字符量（不過我喜歡用模板字符串來稱呼這個。。。）

輸出變量的值，比如上面說到的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>`;

以上是jquery如何輸出html代碼的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！