jquery怎麼輸出html程式碼

jquery輸出html程式碼的方法：1、直接輸出標籤元素，程式碼為【var form1 = "

"】；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  = &#39;<form id="myform" method="post" >&#39;
+&#39;<input type="text" name="uname"  style="height:20px;width:100%;" />&#39;
+&#39;<input type="password" name="pwd" style="height:20px;width:100%;" />&#39;
+&#39;</form>&#39;;

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 = &#39;<table border="1" style="width:100%;">&#39;;
table += &#39;<caption>国家信息列表</caption>&#39;;
table += &#39;<thead><tr><th>ID</th><th>Name</th></tr></thead>&#39;;
table += &#39;<tbody><tr><td>1</td><td>"&#39;+country+&#39;"</td></tr></tbody>&#39;;
table += &#39;</table>&#39;;

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

相關免費學習推薦：

JavaScript（影片）

以上是jquery怎麼輸出html程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！