Comment générer du code HTML avec jquery-js tutoriel-php.cn

Comment générer du code HTML avec jquery

coldplay.xixi

Libérer： 2020-11-17 15:07:29

original

3170 Les gens l'ont consulté

La méthode permettant à jquery de générer du code html : 1. Afficher directement l'élément label, le code est [var form1 = "
"] 2; . Sortie avec variables L'élément d'étiquette du code est [var country =....].

Comment générer du code HTML avec jquery

Comment jquery génère du code HTML :

Formulaire 1 : afficher directement les éléments de balise

1. Utilisez les symboles d'échappement

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

Copier après la connexion

2. Utilisez des guillemets simples

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

Copier après la connexion

3. Utilisez le nombre de caractères du modèle dans es6 (mais j'aime utiliser des chaînes de modèle pour appeler cela. . . )

consiste à ajouter un ( ` ) au milieu. Si vous écrivez une étiquette, elle affichera l'étiquette. Si vous écrivez une variable, elle n'affichera pas la valeur représentée par le. variable, le nom de la variable est affiché. Par exemple, si la valeur de la variable country est « Chine », alors la valeur de la Chine ne sera pas affichée, mais le nom de la variable country. Si vous souhaitez afficher la valeur, veuillez consulter le formulaire 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>`

Copier après la connexion

Formulaire 2 : éléments de balise de sortie avec des variables

1. Utilisez des symboles d'échappement

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

Copier après la connexion

2. Utilisez des guillemets simples

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

Copier après la connexion

<🎜. >3. Utilisez le nombre de caractères du modèle es6 (mais j'aime utiliser des chaînes de modèle pour appeler cela...)

Sortez la valeur de la variable, telle que country="China" mentionné ci-dessus, puis vous devez Comment puis-je exporter la valeur de la Chine ?

peut en fait utiliser des espaces réservés pour représenter

Au milieu des parenthèses, écrivez le nom de la variable que représente la variable que vous souhaitez afficher. ${ }

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

Copier après la connexion