![\"Erfahren](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/Info-Jquery-3-.png\")
<\/a><\/p>\njQuery Template gibt uns die M\u00f6glichkeit bzw. Unterst\u00fctzung, den Inhalt im Browser anzuzeigen und zu manipulieren. Durch die Verwendung von jQuery Templating k\u00f6nnen wir JSON-Strings f\u00fcr die HTML-Elemente rendern. Betrachten wir ein einfaches Beispiel: Wir k\u00f6nnen jQuery Template verwenden, um einige Datens\u00e4tze anzuzeigen, die wir von einer Ajax-Anfrage erhalten haben.<\/p>\n
Ein einfaches Beispiel f\u00fcr jQuery-Vorlagen<\/h2>\n
Jetzt erstellen wir eine einfache Seite mit jQuery-Vorlagen. Wir verwenden ausschlie\u00dflich das jQuery-Plugin. In diesem Beispiel zeigen wir Ihnen, wie Sie eine Vorlage erstellen und den Inhalt aus JSON rendern.<\/p>\n
Anforderung<\/h2>\n
Lassen Sie uns zuerst die Anforderung verstehen. Angenommen, wir m\u00fcssen eine Webseite wie die KnowBand-Website erstellen, um die Module f\u00fcr die E-Commerce-Plattform wie Opencart, Prestashop usw. zu verkaufen. Wir haben einige E-Commerce-Module oder Plugins, die wir auf der KnowBand-Website auflisten m\u00f6chten. Auf der Auflistungsseite zeigen wir also den Namen, das Bild und den Preis des Moduls an. Wir verwenden die folgende JSON-Zeichenfolge, um die Daten aufzulisten:<\/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\": \"Prestashop Mobile App builder\", \"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 - Magento Extensions\", \"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\", \"price \": \"$43\" } ]<\/pre>\n![\"Wir](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/Info-Jquery-2-.png\")
<\/a><\/h2>\n\n- \n
Durch die Verwendung des HTML-Script-Tags<\/h3>\n
Bei dieser Methode schreiben wir HTML-Code in das script-Tag. Der vollst\u00e4ndige Code ist unten angegeben:<\/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>\nWir haben ein Thumbnail innerhalb des script-Tags erstellt, z. B. #blog, script-Tag, und es wurde als Vorlage verwendet. Im obigen Code haben wir {{ }} f\u00fcr Platzhaltervariablen verwendet. Lassen Sie uns verstehen, was wir im obigen Code getan haben:<\/p>\n
var temp = $.trim($('#blog').html()); \/\/ Es wird den gesamten Inhalt des Skript-Tags #blog in eine tempor\u00e4re Variable laden. var x = temp.replace(\/{{name}}\/ig, obj.name); \/\/ Wildcard-Variable {{name}} durch entsprechende Daten aus dem JSON ersetzt. x = x.replace(\/{{image_url}}\/ig, obj.image_url); \/\/ Wildcard-Variable {{image_url}} durch entsprechende Daten aus dem JSON ersetzt. x = x.replace(\/{{price}}\/ig, obj.price); \/\/ Wildcard-Variable {{price}} durch entsprechende Daten aus dem JSON ersetzt. x = x.replace(\/{{module_url}}\/ig, obj.module_url); \/\/ Wildcard-Variable {{module_url}} durch entsprechende Daten aus dem JSON ersetzt. $('.container').append(x); \/\/ Inhalt an Container div angeh\u00e4ngt.<\/pre>\n\n- \n
Durch die Verwendung der Platzhaltertechnik<\/h3>\n<\/li>\n<\/ol>\n
Bei dieser Technik f\u00fcgen wir den Inhalt im HTML-Code an, nachdem wir die Daten mithilfe der jQuery-Platzhaltertechnik ausgef\u00fcllt haben. Der vollst\u00e4ndige Code ist unten angegeben:<\/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>\nIm obigen Beispiel haben wir ` (Back-Tick) als Template-Literal und ${ } als Platzhalter verwendet. Wenn wir Methode 1 mit Methode 2 vergleichen, k\u00f6nnen wir leicht sagen, dass \u201eVorlagenliteral\u201c und \u201ePlatzhalter\u201c unsere Aufgabe erleichtern. In diesem Beispiel haben wir den Vorlagencode in einer Schleife geschrieben und unsere Platzhalter durch die entsprechenden Daten ersetzt.<\/p>\n
Zusammenfassung<\/h2>\n
Um mehr \u00fcber jQuery-Vorlagen zu erfahren, empfehle ich Ihnen, sich die Dokumentation f\u00fcr jQuery-Vorlagen auf der offiziellen jQuery-Website anzusehen.<\/p>\n","protected":false},"excerpt":{"rendered":"
In diesem Artikel geht es um das Erstellen von HTML-Vorlagen mit jQuery. Informieren Sie sich \u00fcber die jQuery jQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek. Es macht Dinge wie das Durchlaufen und Bearbeiten von HTML-Dokumenten, Ereignisbehandlung, Animation und Ajax viel einfacher mit einer benutzerfreundlichen API, die in einer Vielzahl von Browsern funktioniert. Mit einer […]<\/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,27038,13470,16364,16362,16361,16365,8795,16363],"class_list":["post-28150","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-e-commerce-html-vorlage-mit-jquery-erstellen","tag-errorbody-width35emmargin0-autofont-familytahoma-verdana-arial-sans-serifforbiddentoo-many-requests-from-ip-178-62-17-26faithfully-yours-gtranslate-translation-proxy-httpsgtranslate","tag-erstellen-sie-eine-e-commerce-html-vorlage-mit-jquery","tag-erstellen-sie-eine-html-vorlage-mit-jquery","tag-html-vorlage-erstellen","tag-html-vorlage-mit-jquery","tag-plus-und-minus-von-opencart","tag-vorlagenerstellung-mit-jquery"],"acf":[],"yoast_head":"\n
Wie erstelle ich mit jQuery ein eigenes HTML-Template? - 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\/de\/unkategorisiert\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wie erstelle ich mit jQuery ein eigenes HTML-Template? - Knowband Blog | Ecommerce Modules\" \/>\n<meta property=\"og:description\" content=\"In diesem Artikel geht es um das Erstellen von HTML-Vorlagen mit jQuery. Informieren Sie sich \u00fcber die jQuery jQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek. Es macht Dinge wie das Durchlaufen und Bearbeiten von HTML-Dokumenten, Ereignisbehandlung, Animation und Ajax viel einfacher mit einer benutzerfreundlichen API, die in einer Vielzahl von Browsern funktioniert. Mit einer […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.knowband.com\/blog\/de\/unkategorisiert\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-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:42+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=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/de\\\/unkategorisiert\\\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/de\\\/unkategorisiert\\\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-jquery\\\/\"},\"author\":{\"name\":\"Sunny Saurabh\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#\\\/schema\\\/person\\\/57eba27850520f4c8de3853ee8755a55\"},\"headline\":\"Wie erstelle ich mit jQuery ein eigenes HTML-Template?\",\"datePublished\":\"2018-10-30T07:00:56+00:00\",\"dateModified\":\"2022-07-14T13:20:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/de\\\/unkategorisiert\\\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-jquery\\\/\"},\"wordCount\":413,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/de\\\/unkategorisiert\\\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/Main-Banner-Jquery.png\",\"keywords\":[\"\",\"E-Commerce-HTML-Vorlage mit JQuery erstellen\",\"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.\",\"Erstellen Sie eine E-Commerce-HTML-Vorlage mit JQuery\",\"Erstellen Sie eine HTML-Vorlage mit jquery\",\"HTML-Vorlage erstellen\",\"HTML-Vorlage mit jquery\",\"Plus und Minus von OpenCart\",\"Vorlagenerstellung mit jquery\"],\"inLanguage\":\"de-DE\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/de\\\/unkategorisiert\\\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-jquery\\\/\",\"url\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/de\\\/unkategorisiert\\\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-jquery\\\/\",\"name\":\"Wie erstelle ich mit jQuery ein eigenes HTML-Template? - Knowband Blog | Ecommerce Modules\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/de\\\/unkategorisiert\\\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/de\\\/unkategorisiert\\\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-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:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/de\\\/unkategorisiert\\\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-jquery\\\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.knowband.com\\\/blog\\\/de\\\/unkategorisiert\\\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/de\\\/unkategorisiert\\\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-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\\\/de\\\/unkategorisiert\\\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.knowband.com\\\/blog\\\/fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Wie erstelle ich mit jQuery ein eigenes HTML-Template?\"}]},{\"@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\":\"de-DE\"},{\"@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\":\"de-DE\",\"@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\":\"de-DE\",\"@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\\\/de\\\/author\\\/ssaurabh\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wie erstelle ich mit jQuery ein eigenes HTML-Template? - 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\/de\/unkategorisiert\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-jquery\/","og_locale":"de_DE","og_type":"article","og_title":"Wie erstelle ich mit jQuery ein eigenes HTML-Template? - Knowband Blog | Ecommerce Modules","og_description":"In diesem Artikel geht es um das Erstellen von HTML-Vorlagen mit jQuery. Informieren Sie sich \u00fcber die jQuery jQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek. Es macht Dinge wie das Durchlaufen und Bearbeiten von HTML-Dokumenten, Ereignisbehandlung, Animation und Ajax viel einfacher mit einer benutzerfreundlichen API, die in einer Vielzahl von Browsern funktioniert. Mit einer […]","og_url":"https:\/\/www.knowband.com\/blog\/de\/unkategorisiert\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-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:42+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":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.knowband.com\/blog\/de\/unkategorisiert\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-jquery\/#article","isPartOf":{"@id":"https:\/\/www.knowband.com\/blog\/de\/unkategorisiert\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-jquery\/"},"author":{"name":"Sunny Saurabh","@id":"https:\/\/www.knowband.com\/blog\/fr\/#\/schema\/person\/57eba27850520f4c8de3853ee8755a55"},"headline":"Wie erstelle ich mit jQuery ein eigenes HTML-Template?","datePublished":"2018-10-30T07:00:56+00:00","dateModified":"2022-07-14T13:20:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.knowband.com\/blog\/de\/unkategorisiert\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-jquery\/"},"wordCount":413,"commentCount":0,"publisher":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/#organization"},"image":{"@id":"https:\/\/www.knowband.com\/blog\/de\/unkategorisiert\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2018\/10\/Main-Banner-Jquery.png","keywords":["","E-Commerce-HTML-Vorlage mit JQuery erstellen","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.","Erstellen Sie eine E-Commerce-HTML-Vorlage mit JQuery","Erstellen Sie eine HTML-Vorlage mit jquery","HTML-Vorlage erstellen","HTML-Vorlage mit jquery","Plus und Minus von OpenCart","Vorlagenerstellung mit jquery"],"inLanguage":"de-DE"},{"@type":"WebPage","@id":"https:\/\/www.knowband.com\/blog\/de\/unkategorisiert\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-jquery\/","url":"https:\/\/www.knowband.com\/blog\/de\/unkategorisiert\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-jquery\/","name":"Wie erstelle ich mit jQuery ein eigenes HTML-Template? - Knowband Blog | Ecommerce Modules","isPartOf":{"@id":"https:\/\/www.knowband.com\/blog\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.knowband.com\/blog\/de\/unkategorisiert\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.knowband.com\/blog\/de\/unkategorisiert\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-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:42+00:00","breadcrumb":{"@id":"https:\/\/www.knowband.com\/blog\/de\/unkategorisiert\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-jquery\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.knowband.com\/blog\/de\/unkategorisiert\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/www.knowband.com\/blog\/de\/unkategorisiert\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-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\/de\/unkategorisiert\/wie-erstelle-ich-meine-eigene-html-vorlage-mit-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.knowband.com\/blog\/fr\/"},{"@type":"ListItem","position":2,"name":"Wie erstelle ich mit jQuery ein eigenes HTML-Template?"}]},{"@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":"de-DE"},{"@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":"de-DE","@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":"de-DE","@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\/de\/author\/ssaurabh\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.knowband.com\/blog\/de\/wp-json\/wp\/v2\/posts\/28150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.knowband.com\/blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.knowband.com\/blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/de\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/de\/wp-json\/wp\/v2\/comments?post=28150"}],"version-history":[{"count":0,"href":"https:\/\/www.knowband.com\/blog\/de\/wp-json\/wp\/v2\/posts\/28150\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/de\/wp-json\/wp\/v2\/media\/816736"}],"wp:attachment":[{"href":"https:\/\/www.knowband.com\/blog\/de\/wp-json\/wp\/v2\/media?parent=28150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/de\/wp-json\/wp\/v2\/categories?post=28150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.knowband.com\/blog\/de\/wp-json\/wp\/v2\/tags?post=28150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}