Maison > interface Web > js tutoriel > le corps du texte

Comment générer du code HTML avec jquery

coldplay.xixi
Libérer: 2020-11-17 15:07:29
original
3232 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
Recommandations d'apprentissage gratuites associées :

JavaScript (vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal