{"id":22312,"date":"2018-10-30T07:00:56","date_gmt":"2018-10-30T07:00:56","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=22312\/"},"modified":"2022-08-13T12:01:14","modified_gmt":"2022-07-18T11:14:22","slug":"create-your-own-html-template-using-jquery","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/tutorials\/create-your-own-html-template-using-jquery\/","title":{"rendered":"How to create your own HTML template using jQuery?"},"content":{"rendered":"

This article is all about creating HTML template using jQuery.<\/p>\n

Let’s know about the jQuery<\/h2>\n

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.<\/p>\n

Let’s know about the jQuery Template<\/h2>\n

\"learn<\/a><\/p>\n

jQuery Template gives us an option or\u00a0support to display and manipulation of the content on the browser. By using the jQuery Templating we can render JSON string to the HTML elements. Let us consider a simple example, we can use jQuery Template to display some set of records that we have got from an Ajax’s request.<\/p>\n

A basic example of jQuery templates<\/h2>\n

Now we create a simple page using jQuery templates. We will only use the jQuery plugin. In this example, we will show you how to create a template and render the content from the JSON.<\/p>\n

Requirement<\/h2>\n

Let\u2019s us understand the requirement first.<\/p>\n

Suppose we have to create a webpage like KnowBand website to sell the modules for the e-commerce platform like Opencart, Prestashop etc. We have some e-commerce modules or plugin that we want to list on KnowBand\u00a0site. So, on the listing page, we will show the module’s name, image, and price.<\/p>\n

We will use the below JSON string to list the data:<\/p>\n

[\r\n\t{\r\n\t\t"name": "Product tabs- PrestashopAddons",\r\n\t\t"image_url": "https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/Product-Tabs-logo-1000-x-1000.jpg",\r\n\t\t"module_url": "https:\\\/\\\/www.knowband.com\\\/prestashop-product-tabs",\r\n\t\t"price": "$25"\r\n\t},\r\n\t{\r\n\t\t"name": "Prestashop Mobile App builder",\r\n\t\t"image_url": "https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/Mobile-app-prestashop-plugin-500-X-500.jpg",\r\n\t\t"module_url": "https:\\\/\\\/www.knowband.com\\\/prestashop-mobile-app-builder",\r\n\t\t"price": "$30"\r\n\t},\r\n\t{\r\n\t\t"name": "Return Manager - Magento Extensions",\r\n\t\t"image_url": "https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/return-manager.png",\r\n\t\t"module_url": "https:\\\/\\\/www.knowband.com\\\/magento-return-manager",\r\n\t\t"price": "$50"\r\n\t},\r\n\t{\r\n\t\t"name": "Web Push Notification - PrestashopAddons",\r\n\t\t"image_url": "https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/Web-Push-Notification-plugin.jpg",\r\n\t\t"module_url": "https:\\\/\\\/www.knowband.com\\\/prestashop-web-push-notifications",\r\n\t\t"price": "$43"\r\n\t}\r\n]<\/pre>\n
\"We<\/a><\/h2>\n
    \n
  1. \n
    By using the HTML Script Tag<\/h3>\n
    In this method, we will write HTML code in the script tag. The complete code is given below:<\/li>\n<\/ol>\n
    <html>\r\n    <head>\r\n            <link rel="stylesheet" href="https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css&quot;>\r\n            <script src="https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js&quot;&gt;&lt;\/script>\r\n        <\/head>\r\n        <body>\r\n            <div class="container">\r\n                <script id="blog" type="template">\r\n                    <div class="col-md-3">\r\n                        <a href="{{module_url}}">\r\n                            <div class="thumbnail">\r\n                                <imgsrc="{{image_url}}" class="img-rounded img-responsive" width="100%"><\/img>\r\n                                <div class="caption">\r\n                                    <p class="lead">{{price}}<\/p>\r\n                                    <p>{{name}}<\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/a>\r\n                    <\/div>\r\n                <\/script>\r\n            <\/div>\r\n            <script>\r\n            $(function () {\r\n                varknoband_data = [\r\n                        {\r\n                            "name": "Product tabs- PrestashopAddons",\r\n                            "image_url": "https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/Product-Tabs-logo-1000-x-1000.jpg",\r\n                            "module_url": "https:\\\/\\\/www.knowband.com\\\/prestashop-product-tabs",\r\n                            "price": "$25"\r\n                        },\r\n                        {\r\n                            "name": "Prestashop Mobile App builder",\r\n                            "image_url": "https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/Mobile-app-prestashop-plugin-500-X-500.jpg",\r\n                            "module_url": "https:\\\/\\\/www.knowband.com\\\/prestashop-mobile-app-builder",\r\n                            "price": "$30"\r\n                        },\r\n                        {\r\n                            "name": "Return Manager - Magento Extensions",\r\n                            "image_url": "https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/return-manager.png",\r\n                            "module_url": "https:\\\/\\\/www.knowband.com\\\/magento-return-manager",\r\n                            "price": "$50"\r\n                        },\r\n                        {\r\n                            "name": "Web Push Notification - PrestashopAddons",\r\n                            "image_url": "https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/Web-Push-Notification-plugin.jpg",\r\n                            "module_url": "https:\\\/\\\/www.knowband.com\\\/prestashop-web-push-notifications",\r\n                            "price": "$43"\r\n                        }\r\n                    ];\r\n                var temp = $.trim($('#blog').html());\r\n                $.each(knoband_data, function (index, obj) {\r\n                    var x = temp.replace(\/{{name}}\/ig, obj.name);\r\n                    x = x.replace(\/{{image_url}}\/ig, obj.image_url);\r\n                    x = x.replace(\/{{price}}\/ig, obj.price);\r\n                    x = x.replace(\/{{module_url}}\/ig, obj.module_url);\r\n                    $('.container').append(x);\r\n                });\r\n            });\r\n        <\/script>\r\n        <\/body>\r\n    <\/html><\/pre>\n
    We have created\u00a0a thumbnail inside script tag i.e. #blog\u00a0script tag and it was used as a template. In the above code, we have used {{ }} for wildcard variables.<\/p>\n
    Let’s understand actually what we have done in the above code:<\/p>\n
    var temp = $.trim($('#blog').html()); \/\/ It wil load all content of the #blog script tag in a temp variable.\r\nvar x = temp.replace(\/{{name}}\/ig, obj.name);       \/\/ Replaced the wildcard variable {{name}} with corresponding data from the JSON.\r\nx = x.replace(\/{{image_url}}\/ig, obj.image_url);     \/\/ Replaced the wildcard variable {{image_url}} with corresponding data from the JSON.\r\nx = x.replace(\/{{price}}\/ig, obj.price);                    \/\/ Replaced the wildcard variable {{price}} with corresponding data from the JSON.\r\nx = x.replace(\/{{module_url}}\/ig, obj.module_url);  \/\/ Replaced the wildcard variable {{module_url}} with corresponding data from the JSON.\r\n$('.container').append(x); \/\/ appended the content to the container div.<\/pre>\n
      \n
    1. \n
      By using the Placeholder technique<\/h3>\n<\/li>\n<\/ol>\n
      In this technique, we will append the content in the HTML after populating the data using the jQuery placeholder technique. The complete code is given below:<\/p>\n
      <html>\r\n    <head>\r\n        <link rel="stylesheet" href="https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css&quot;>\r\n        <script src="https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js&quot;&gt;&lt;\/script>\r\n    <\/head>\r\n    <body>\r\n        <div class="container"><\/div>\r\n        <script>\r\n         $(function() {\r\n             varknoband_data = [\r\n                        {\r\n                            "name": "Product tabs- PrestashopAddons",\r\n                            "image_url": "https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/Product-Tabs-logo-1000-x-1000.jpg",\r\n                            "module_url": "https:\\\/\\\/www.knowband.com\\\/prestashop-product-tabs",\r\n                            "price": "$25"\r\n                        },\r\n                        {\r\n                            "name": "Prestashop Mobile App builder",\r\n                            "image_url": "https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/Mobile-app-prestashop-plugin-500-X-500.jpg",\r\n                            "module_url": "https:\\\/\\\/www.knowband.com\\\/prestashop-mobile-app-builder",\r\n                            "price": "$30"\r\n                        },\r\n                        {\r\n                            "name": "Return Manager - Magento Extensions",\r\n                            "image_url": "https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/return-manager.png",\r\n                            "module_url": "https:\\\/\\\/www.knowband.com\\\/magento-return-manager",\r\n                            "price": "$50"\r\n                        },\r\n                        {\r\n                            "name": "Web Push Notification - PrestashopAddons",\r\n                            "image_url": "https:\\\/\\\/www.knowband.com\\\/image\\\/data\\\/Plugin%20Logo\\\/Web-Push-Notification-plugin.jpg",\r\n                            "module_url": "https:\\\/\\\/www.knowband.com\\\/prestashop-web-push-notifications",\r\n                            "price": "$43"\r\n                        }\r\n                    ];\r\n             $.each(knoband_data, function(index, obj) {\r\n                $('.container').append(\r\n                    `<div class="col-md-3">\r\n                        <a href="${obj.module_url}">\r\n                            <div class="thumbnail">\r\n                                <imgsrc="${obj.image_url}" class="img-rounded img-responsive" width="100%"><\/img>\r\n                                <div class="caption">\r\n                                    <p class="lead">${obj.price}<\/p>\r\n                                    <p>${obj.name}<\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/a>\r\n                    <\/div>`\r\n                );\r\n            });\r\n         });\r\n        <\/script>\r\n    <\/body>\r\n<\/html><\/pre>\n
      In the above example, we have used ` (back-tick) as template literal\u00a0and ${ } as a placeholder. When we compare method 1 with method 2 we can easily say\u00a0template literal\u00a0and\u00a0placeholder makes our task easier. In this example, we have written the template code in a loop and replaced our placeholders with its corresponding data.<\/p>\n
      Summary<\/h2>\n
      To learn more about jQuery Templates, I recommend that you look at the documentation for jQuery Templates at the official jQuery website.<\/p>\n
      For any queries, please reach us at support@knowband.com. We also provide custom development of all sorts. You can also find the best eCommerce modules for Prestashop, Opencart,\u00a0Magento and Magento 2 here<\/a>.<\/p>\n
      We also recommend our most popular One page supercheckout<\/a> module as a must-have module for all eCommerce stores. Know more:
      \n