![\"en](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/Info-Jquery-3-.png\")
<\/a><\/p>\njQuery Template nous donne une option ou un support pour afficher et manipuler le contenu sur le navigateur. En utilisant le mod\u00e8le jQuery, nous pouvons restituer la cha\u00eene JSON aux \u00e9l\u00e9ments HTML. Prenons un exemple simple, nous pouvons utiliser jQuery Template pour afficher un ensemble d’enregistrements que nous avons obtenus \u00e0 partir d’une requ\u00eate Ajax.<\/p>\n
Un exemple de base de mod\u00e8les jQuery<\/h2>\n
Nous cr\u00e9ons maintenant une page simple \u00e0 l’aide de mod\u00e8les jQuery. Nous n’utiliserons que le plugin jQuery. Dans cet exemple, nous allons vous montrer comment cr\u00e9er un mod\u00e8le et restituer le contenu \u00e0 partir du JSON.<\/p>\n
Exigence<\/h2>\n
Comprenons d’abord l’exigence. Supposons que nous devions cr\u00e9er une page Web comme le site Web KnowBand pour vendre les modules de la plate-forme de commerce \u00e9lectronique comme Opencart, Prestashop, etc. Nous avons des modules ou plugins de commerce \u00e9lectronique que nous voulons r\u00e9pertorier sur le site KnowBand. Ainsi, sur la page de liste, nous afficherons le nom, l’image et le prix du module. Nous utiliserons la cha\u00eene JSON ci-dessous pour r\u00e9pertorier les donn\u00e9es :<\/p>\n
[ { \"name\": \"Product tabs- PrestashopAddons\", \"image_url\": \"https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/Product-Tabs-logo-1000- x-1000.jpg\", \"module_url\": \"https:\\\/\\\/www.knowband.com\\\/prestashop-product-tabs\", \"price\": \"$25\" }, { \"name\": \"Application mobile Prestashop constructeur\", \"image_url\": \"https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/Mobile-app-prestashop-plugin-500-X-500.jpg\", \" module_url\": \"https:\\\/\\\/www.knowband.com\\\/prestashop-mobile-app-builder\", \"price\": \"$30\" }, { \"name\": \"Return Manager - Extensions Magento\", \"image_url \" : \"https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/return-manager.png\", \"module_url\": \"https:\\\/\\\/www.knowband.com \\\/magento-return-manager\", \"price\": \"$50\" }, { \"name\": \"Web Push Notification - PrestashopAddons\", \"image_url\": \"https:\\\/\\\/www.knowband.com\\\/image \\\/data\\\/Plugin%20Logo\\\/Web-Push-Notification-plugin.jpg\", \"module_url\": \"https:\\\/\\\/www.knowband.com\\\/prestashop-web-push-notifications\", \"prix \": \"$43\" } ]<\/pre>\n![\"Nous](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/Info-Jquery-2-.png\")
<\/a><\/h2>\n\n- \n
En utilisant la balise de script HTML<\/h3>\n
Dans cette m\u00e9thode, nous \u00e9crirons du code HTML dans la balise script. Le code complet est donn\u00e9 ci-dessous :<\/li>\n<\/ol>\n
<html>\n <head>\n <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css">\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js"><\/script>\n <\/head>\n <body>\n <div class=\"container\">\n <script id=\"blog\" type=\"template\">\n <div class=\"col-md-3\">\n <a href=\"{{module_url}}\">\n <div class=\"thumbnail\">\n <imgsrc=\"{{image_url}}\" class=\"img-rounded img-responsive\" width=\"100%\"><\/img>\n <div class=\"caption\">\n <p class=\"lead\">{{price}}<\/p>\n <p>{{name}}<\/p>\n <\/div>\n <\/div>\n <\/a>\n <\/div>\n <\/script>\n <\/div>\n <script>\n $(function () {\n varknoband_data = [\n {\n \"name\": \"Product tabs- PrestashopAddons\",\n \"image_url\": \"https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/Product-Tabs-logo-1000-x-1000.jpg\",\n \"module_url\": \"https:\\\/\\\/www.knowband.com\\\/prestashop-product-tabs\",\n \"price\": \"$25\"\n },\n {\n \"name\": \"Prestashop Mobile App builder\",\n \"image_url\": \"https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/Mobile-app-prestashop-plugin-500-X-500.jpg\",\n \"module_url\": \"https:\\\/\\\/www.knowband.com\\\/prestashop-mobile-app-builder\",\n \"price\": \"$30\"\n },\n {\n \"name\": \"Return Manager - Magento Extensions\",\n \"image_url\": \"https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/return-manager.png\",\n \"module_url\": \"https:\\\/\\\/www.knowband.com\\\/magento-return-manager\",\n \"price\": \"$50\"\n },\n {\n \"name\": \"Web Push Notification - PrestashopAddons\",\n \"image_url\": \"https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/Web-Push-Notification-plugin.jpg\",\n \"module_url\": \"https:\\\/\\\/www.knowband.com\\\/prestashop-web-push-notifications\",\n \"price\": \"$43\"\n }\n ];\n var temp = $.trim($('#blog').html());\n $.each(knoband_data, function (index, obj) {\n var x = temp.replace(\/{{name}}\/ig, obj.name);\n x = x.replace(\/{{image_url}}\/ig, obj.image_url);\n x = x.replace(\/{{price}}\/ig, obj.price);\n x = x.replace(\/{{module_url}}\/ig, obj.module_url);\n $('.container').append(x);\n });\n });\n <\/script>\n <\/body>\n <\/html><\/pre>\nNous avons cr\u00e9\u00e9 une vignette \u00e0 l’int\u00e9rieur de la balise de script, c’est-\u00e0-dire la balise de script #blog, et elle a \u00e9t\u00e9 utilis\u00e9e comme mod\u00e8le. Dans le code ci-dessus, nous avons utilis\u00e9 {{ }} pour les variables g\u00e9n\u00e9riques. Comprenons en fait ce que nous avons fait dans le code ci-dessus :<\/p>\n
var temp = $.trim($('#blog').html()); \/\/ Il chargera tout le contenu de la balise de script #blog dans une variable temporaire. var x = temp.replace(\/{{name}}\/ig, obj.name); \/\/ Remplacement de la variable g\u00e9n\u00e9rique {{name}} par les donn\u00e9es correspondantes du JSON. x = x.replace(\/{{image_url}}\/ig, obj.image_url); \/\/ Remplacement de la variable g\u00e9n\u00e9rique {{image_url}} par les donn\u00e9es correspondantes du JSON. x = x.replace(\/{{prix}}\/ig, obj.prix); \/\/ Remplacement de la variable g\u00e9n\u00e9rique {{price}} par les donn\u00e9es correspondantes du JSON. x = x.replace(\/{{module_url}}\/ig, obj.module_url); \/\/ Remplacement de la variable g\u00e9n\u00e9rique {{module_url}} par les donn\u00e9es correspondantes du JSON. $('.container').append(x); \/\/ a ajout\u00e9 le contenu au conteneur div.<\/pre>\n\n- \n
En utilisant la technique Placeholder<\/h3>\n<\/li>\n<\/ol>\n
Dans cette technique, nous ajouterons le contenu dans le HTML apr\u00e8s avoir rempli les donn\u00e9es \u00e0 l’aide de la technique d’espace r\u00e9serv\u00e9 jQuery. Le code complet est donn\u00e9 ci-dessous :<\/p>\n
\n \n \n \n \n \n \n \n $(function() {\n varknoband_data = [\n {\n \"name\": \"Product tabs- PrestashopAddons\",\n \"image_url\": \"https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%3.3.7Logo\\\/Product-Tabs-logo-3.2.1-x-20.jpg\",\n \"module_url\": \"https:\\\/\\\/www.knowband.com\\\/prestashop-product-tabs\",\n \"price\": \"$1000\"\n },\n {\n \"name\": \"Prestashop Mobile App builder\",\n \"image_url\": \"https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%1000Logo\\\/Mobile-app-prestashop-plugin-25-X-20.jpg\",\n \"module_url\": \"https:\\\/\\\/www.knowband.com\\\/prestashop-mobile-app-builder\",\n \"price\": \"$500\"\n },\n {\n \"name\": \"Return Manager - Magento Extensions\",\n \"image_url\": \"https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%500Logo\\\/return-manager.png\",\n \"module_url\": \"https:\\\/\\\/www.knowband.com\\\/magento-return-manager\",\n \"price\": \"$30\"\n },\n {\n \"name\": \"Web Push Notification - PrestashopAddons\",\n \"image_url\": \"https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/Web-Push-Notification-plugin.jpg\",\n \"module_url\": \"https:\\\/\\\/www.knowband.com\\\/prestashop-web-push-notifications\",\n \"price\": \"$50\"\n }\n ];\n $.each(knoband_data, function(index, obj) {\n $('.container').append(\n `\n \n \n \n \n ${obj.price}\n ${obj.name}\n \n \n \n `\n );\n });\n });\n \n \n<\/pre>\nDans l’exemple ci-dessus, nous avons utilis\u00e9 ` (back-tick) comme litt\u00e9ral de mod\u00e8le et ${ } comme espace r\u00e9serv\u00e9. Lorsque nous comparons la m\u00e9thode 1 \u00e0 la m\u00e9thode 2, nous pouvons facilement dire que le mod\u00e8le litt\u00e9ral et l’espace r\u00e9serv\u00e9 facilitent notre t\u00e2che. Dans cet exemple, nous avons \u00e9crit le code du mod\u00e8le dans une boucle et remplac\u00e9 nos espaces r\u00e9serv\u00e9s par ses donn\u00e9es correspondantes.<\/p>\n
R\u00e9sum\u00e9<\/h2>\n
Pour en savoir plus sur les mod\u00e8les jQuery, je vous recommande de consulter la documentation des mod\u00e8les jQuery sur le site Web officiel de jQuery.<\/p>\n","protected":false},"excerpt":{"rendered":"
Cet article concerne la cr\u00e9ation d’un mod\u00e8le HTML \u00e0 l’aide de jQuery. Faisons connaissance avec jQuery jQuery est une biblioth\u00e8que JavaScript rapide, petite et riche en fonctionnalit\u00e9s. Cela simplifie consid\u00e9rablement la navigation et la manipulation de documents HTML, la gestion des \u00e9v\u00e9nements, l’animation et Ajax avec une API facile \u00e0 utiliser qui fonctionne sur une […]<\/p>\n","protected":false},"author":15,"featured_media":816736,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kbui_enabled":"","footnotes":""},"categories":[],"tags":[2298,8793,27036,16109,16107,27035,27037,16110,16108,13469,14420,16111],"class_list":["post-28149","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-avantages-et-inconvnients-dopencart","tag-cration-de-modle-avec-jquery","tag-cration-de-template-en-utilisant-jquery","tag-crer-un-modle-html","tag-crer-un-modle-html-avec-jquery","tag-crer-un-modle-html-de-commerce-lectronique--laide-de-jquery","tag-crer-un-modle-html-en-utilisant-jquery","tag-errorbody-width35emmargin0-autofont-familytahoma-verdana-arial-sans-serifforbiddentoo-many-requests-from-ip-178-62-17-26faithfully-yours-gtranslate-translation-proxy-httpsgtranslate","tag-modle-html-utilisant-jquery"],"acf":[],"yoast_head":"\n
Comment cr\u00e9er votre propre mod\u00e8le HTML en utilisant jQuery ? - Knowband Blog | Ecommerce Modules<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.knowband.com\/blog\/fr\/non-classifiee\/comment-cr\u00e9er-votre-propre-mod\u00e8le-html-avec-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment cr\u00e9er votre propre mod\u00e8le HTML en utilisant jQuery ? - Knowband Blog | Ecommerce Modules\" \/>\n<meta property=\"og:description\" content=\"Cet article concerne la cr\u00e9ation d’un mod\u00e8le HTML \u00e0 l’aide de jQuery. Faisons connaissance avec jQuery jQuery est une biblioth\u00e8que JavaScript rapide, petite et riche en fonctionnalit\u00e9s. Cela simplifie consid\u00e9rablement la navigation et la manipulation de documents HTML, la gestion des \u00e9v\u00e9nements, l’animation et Ajax avec une API facile \u00e0 utiliser qui fonctionne sur une […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.knowband.com\/blog\/fr\/non-classifiee\/comment-cr\u00e9er-votre-propre-mod\u00e8le-html-avec-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Knowband Blog | Ecommerce Modules\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Knowband\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-30T07:00:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-14T13:20:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/Main-Banner-Jquery.png\" \/>\n\t<meta property=\"og:image:width\" content=\"760\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Sunny Saurabh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@KnowbandPlugin\" \/>\n<meta name=\"twitter:site\" content=\"@KnowbandPlugin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sunny Saurabh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/non-classifiee\\\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/non-classifiee\\\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\\\/\"},\"author\":{\"name\":\"Sunny Saurabh\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#\\\/schema\\\/person\\\/57eba27850520f4c8de3853ee8755a55\"},\"headline\":\"Comment cr\u00e9er votre propre mod\u00e8le HTML en utilisant jQuery ?\",\"datePublished\":\"2018-10-30T07:00:56+00:00\",\"dateModified\":\"2022-07-14T13:20:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/non-classifiee\\\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\\\/\"},\"wordCount\":517,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/non-classifiee\\\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/Main-Banner-Jquery.png\",\"keywords\":[\"\",\"avantages et inconv\u00e9nients d'OpenCart\",\"cr\u00e9ation de mod\u00e8le avec jquery\",\"cr\u00e9ation de template en utilisant jquery\",\"cr\u00e9er un mod\u00e8le html\",\"cr\u00e9er un mod\u00e8le html avec jquery\",\"cr\u00e9er un mod\u00e8le HTML de commerce \u00e9lectronique \u00e0 l'aide de JQuery\",\"cr\u00e9er un mod\u00e8le HTML de commerce \u00e9lectronique \u00e0 l'aide de JQuery\",\"cr\u00e9er un mod\u00e8le html en utilisant jquery\",\"Errorbody {width:35em;margin:0 auto;font-family:Tahoma, Verdana, Arial, sans-serif;}ForbiddenToo many requests from IP: 178.62.17.26Faithfully yours, GTranslate - Translation Proxy.https:\\\/\\\/gtranslate.\",\"Errorbody {width:35em;margin:0 auto;font-family:Tahoma, Verdana, Arial, sans-serif;}ForbiddenToo many requests from IP: 178.62.17.26Faithfully yours, GTranslate - Translation Proxy.https:\\\/\\\/gtranslate.\",\"mod\u00e8le html utilisant jquery\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/non-classifiee\\\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\\\/\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/non-classifiee\\\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\\\/\",\"name\":\"Comment cr\u00e9er votre propre mod\u00e8le HTML en utilisant jQuery ? - Knowband Blog | Ecommerce Modules\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/non-classifiee\\\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/non-classifiee\\\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/Main-Banner-Jquery.png\",\"datePublished\":\"2018-10-30T07:00:56+00:00\",\"dateModified\":\"2022-07-14T13:20:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/non-classifiee\\\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/non-classifiee\\\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/non-classifiee\\\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/Main-Banner-Jquery.png\",\"contentUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/Main-Banner-Jquery.png\",\"width\":760,\"height\":300,\"caption\":\"How to create your own HTML template using jQuery?\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/non-classifiee\\\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Comment cr\u00e9er votre propre mod\u00e8le HTML en utilisant jQuery ?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#website\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/\",\"name\":\"Knowband Blog | Ecommerce Modules\",\"description\":\"Magento, Prestashop, Opencart, Shopify\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#organization\",\"name\":\"Knowband Blog | Ecommerce Modules\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/cropped-knowband_logo-v2.png\",\"contentUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/cropped-knowband_logo-v2.png\",\"width\":153,\"height\":61,\"caption\":\"Knowband Blog | Ecommerce Modules\"},\"image\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Knowband\",\"https:\\\/\\\/x.com\\\/KnowbandPlugin\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#\\\/schema\\\/person\\\/57eba27850520f4c8de3853ee8755a55\",\"name\":\"Sunny Saurabh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/IMG_20181029_123810-150x150.jpg\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/IMG_20181029_123810-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/IMG_20181029_123810-150x150.jpg\",\"caption\":\"Sunny Saurabh\"},\"description\":\"Sunny Saurabh is an experienced Software engineer in C# and ASP.NET as well as an expert as a PHP developer. He has also expert in database design, server maintenance and security. He has achieved this goal only in the short span of 3yrs and still looking forward to achieving more in the IT industry. He lives in New Delhi and his hobby to write the technical writeups.\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/author\\\/ssaurabh\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Comment cr\u00e9er votre propre mod\u00e8le HTML en utilisant jQuery ? - Knowband Blog | Ecommerce Modules","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.knowband.com\/blog\/fr\/non-classifiee\/comment-cr\u00e9er-votre-propre-mod\u00e8le-html-avec-jquery\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment cr\u00e9er votre propre mod\u00e8le HTML en utilisant jQuery ? - Knowband Blog | Ecommerce Modules","og_description":"Cet article concerne la cr\u00e9ation d’un mod\u00e8le HTML \u00e0 l’aide de jQuery. Faisons connaissance avec jQuery jQuery est une biblioth\u00e8que JavaScript rapide, petite et riche en fonctionnalit\u00e9s. Cela simplifie consid\u00e9rablement la navigation et la manipulation de documents HTML, la gestion des \u00e9v\u00e9nements, l’animation et Ajax avec une API facile \u00e0 utiliser qui fonctionne sur une […]","og_url":"https:\/\/www.knowband.com\/blog\/fr\/non-classifiee\/comment-cr\u00e9er-votre-propre-mod\u00e8le-html-avec-jquery\/","og_site_name":"Knowband Blog | Ecommerce Modules","article_publisher":"https:\/\/www.facebook.com\/Knowband","article_published_time":"2018-10-30T07:00:56+00:00","article_modified_time":"2022-07-14T13:20:21+00:00","og_image":[{"width":760,"height":300,"url":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/Main-Banner-Jquery.png","type":"image\/png"}],"author":"Sunny Saurabh","twitter_card":"summary_large_image","twitter_creator":"@KnowbandPlugin","twitter_site":"@KnowbandPlugin","twitter_misc":{"Written by":"Sunny Saurabh","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.knowband.com\/blog\/fr\/non-classifiee\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\/#article","isPartOf":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/non-classifiee\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\/"},"author":{"name":"Sunny Saurabh","@id":"https:\/\/www.knowband.com\/blog\/fr\/#\/schema\/person\/57eba27850520f4c8de3853ee8755a55"},"headline":"Comment cr\u00e9er votre propre mod\u00e8le HTML en utilisant jQuery ?","datePublished":"2018-10-30T07:00:56+00:00","dateModified":"2022-07-14T13:20:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/non-classifiee\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\/"},"wordCount":517,"commentCount":0,"publisher":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/#organization"},"image":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/non-classifiee\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/Main-Banner-Jquery.png","keywords":["","avantages et inconv\u00e9nients d'OpenCart","cr\u00e9ation de mod\u00e8le avec jquery","cr\u00e9ation de template en utilisant jquery","cr\u00e9er un mod\u00e8le html","cr\u00e9er un mod\u00e8le html avec jquery","cr\u00e9er un mod\u00e8le HTML de commerce \u00e9lectronique \u00e0 l'aide de JQuery","cr\u00e9er un mod\u00e8le HTML de commerce \u00e9lectronique \u00e0 l'aide de JQuery","cr\u00e9er un mod\u00e8le html en utilisant jquery","Errorbody {width:35em;margin:0 auto;font-family:Tahoma, Verdana, Arial, sans-serif;}ForbiddenToo many requests from IP: 178.62.17.26Faithfully yours, GTranslate - Translation Proxy.https:\/\/gtranslate.","Errorbody {width:35em;margin:0 auto;font-family:Tahoma, Verdana, Arial, sans-serif;}ForbiddenToo many requests from IP: 178.62.17.26Faithfully yours, GTranslate - Translation Proxy.https:\/\/gtranslate.","mod\u00e8le html utilisant jquery"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/www.knowband.com\/blog\/fr\/non-classifiee\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\/","url":"https:\/\/www.knowband.com\/blog\/fr\/non-classifiee\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\/","name":"Comment cr\u00e9er votre propre mod\u00e8le HTML en utilisant jQuery ? - Knowband Blog | Ecommerce Modules","isPartOf":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/non-classifiee\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/non-classifiee\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/Main-Banner-Jquery.png","datePublished":"2018-10-30T07:00:56+00:00","dateModified":"2022-07-14T13:20:21+00:00","breadcrumb":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/non-classifiee\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.knowband.com\/blog\/fr\/non-classifiee\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.knowband.com\/blog\/fr\/non-classifiee\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\/#primaryimage","url":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/Main-Banner-Jquery.png","contentUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/Main-Banner-Jquery.png","width":760,"height":300,"caption":"How to create your own HTML template using jQuery?"},{"@type":"BreadcrumbList","@id":"https:\/\/www.knowband.com\/blog\/fr\/non-classifiee\/comment-cr%c3%a9er-votre-propre-mod%c3%a8le-html-avec-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.knowband.com\/blog\/fr\/"},{"@type":"ListItem","position":2,"name":"Comment cr\u00e9er votre propre mod\u00e8le HTML en utilisant jQuery ?"}]},{"@type":"WebSite","@id":"https:\/\/www.knowband.com\/blog\/fr\/#website","url":"https:\/\/www.knowband.com\/blog\/fr\/","name":"Knowband Blog | Ecommerce Modules","description":"Magento, Prestashop, Opencart, Shopify","publisher":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.knowband.com\/blog\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.knowband.com\/blog\/fr\/#organization","name":"Knowband Blog | Ecommerce Modules","url":"https:\/\/www.knowband.com\/blog\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.knowband.com\/blog\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/09\/cropped-knowband_logo-v2.png","contentUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2016\/09\/cropped-knowband_logo-v2.png","width":153,"height":61,"caption":"Knowband Blog | Ecommerce Modules"},"image":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Knowband","https:\/\/x.com\/KnowbandPlugin"]},{"@type":"Person","@id":"https:\/\/www.knowband.com\/blog\/fr\/#\/schema\/person\/57eba27850520f4c8de3853ee8755a55","name":"Sunny Saurabh","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/IMG_20181029_123810-150x150.jpg","url":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/IMG_20181029_123810-150x150.jpg","contentUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/IMG_20181029_123810-150x150.jpg","caption":"Sunny Saurabh"},"description":"Sunny Saurabh is an experienced Software engineer in C# and ASP.NET as well as an expert as a PHP developer. He has also expert in database design, server maintenance and security. He has achieved this goal only in the short span of 3yrs and still looking forward to achieving more in the IT industry. He lives in New Delhi and his hobby to write the technical writeups.","url":"https:\/\/www.knowband.com\/blog\/fr\/author\/ssaurabh\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/28149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/comments?post=28149"}],"version-history":[{"count":0,"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/28149\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/media\/816736"}],"wp:attachment":[{"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/media?parent=28149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/categories?post=28149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/fr\/wp-json\/wp\/v2\/tags?post=28149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}