How to output html code with jquery

Jquery method of outputting html code: 1. Directly output the label element, the code is [var form1 = "

"]; 2 , output label elements with variables, the code is [var country =....].

How jquery outputs html code:

Form 1: Directly output tag elements

1. Use escape symbols

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. Use single quotes

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. Use the template character amount of es6 (but I like to use template strings to call this . . .)

Just add a (`) before and after, and write what you want to output in the middle. If you write a label, it will output the label. If you write \n, it means a new line. If you write a variable, it will not The value represented by the variable will be output, but the name of the variable will be output. For example, if the value of the variable country is "China", then it will not output the value of China, but the name of the country variable. If you want to output the value, please see Form 2.

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

Form 2: Output tag elements with variables

1.Use escape symbols

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.Use single quotes

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. Use the template character amount of es6 (but I like to use template strings to call this...)

Output the value of the variable, such as the country="China" mentioned above, then you need to How can I export the value of China?

In fact, you can use placeholders to represent ${ }, and write the variable name represented by the variable you want to output in the part between the brackets.

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

Related free learning recommendations: JavaScript (video)

The above is the detailed content of How to output html code with jquery. For more information, please follow other related articles on the PHP Chinese website!