Easy Javascript Templating- Web Development

Estimated Reading Time: 3 minutes

So I have been working on some web development projects that required me to create multiple html elements with dynamic data pulled from a database. So I did some searching on ways to easily template with jquery.

There are 2 essential parts to this method of templating. First you create the html markup that you wish to repeat. That is placed inside a script tag and will look something like this:

<script id=“TemplateTest” type=“text/javascript”>

<li class=‘item’>

      <h3></h3>

      <div></div>

</li>

</script>

This html markup can now be used to dynamically populate a <ul> tag with a little javascript/jquery.

First off we need to place our html template into a variable and initialize a variable called body that we will use to append to the <ul> tag later.

var template = $.trim( $(‘#TemplateTest’).html() );

var body = ;

Next we create the array that we are going to use to fill out our list items. This usually is created via an ajax call to the database but for this tutorial we will do it in the function.

var items = [[‘Infotrust’,‘Best Company Ever!’],

             [‘Analytics’,‘Yes we are a google partner’],

             [‘Training’,‘We do training too!’]];

Now we are coming to the workhorse of the templating: the $.each() function in jquery. This allows me to loop through my array and use the items inside each row to replace the placeholder data with information from the array.

$.each( items, function( index, obj )

{

body += template.replace( //ig, obj[0] )

                .replace( //ig, obj[1] );

});

Now we are ready to take our body variable and append it to <ul> tag with an ID of ‘Tutorial’.

$(‘#Tutorial’).append(body);

That’s it! Now this is a very simplified version but this format can easily be tweaked to fit all sorts of situations. Below is the code at work as well as the source code:

<!DOCTYPE html>

<html>

    <head>

        <title>Jquery Templating Source</title>

        <script id=‘TemplateTest’ type=‘template’>

            <li class=‘item’>

                  <h3></h3>

                  <div></div>

            </li>

        </script>

        <script type=‘text/javascript’ src=‘http://code.jquery.com/jquery-1.6.2.js’></script>

    </head>

    <body>

        <ul id=‘Tutorial’>

        </ul>

    </body>

    <script type=‘text/javascript’>

    $(document).ready(function()

    {

        var template = $.trim( $(‘#TemplateTest’).html() );

        var body = ”;

       

        var items = [[‘Infotrust’,’Best Company Ever!’],

                     [‘Analytics’,’Yes we are a google partner’],

                     [‘Training’,’We do training too!’]];

       

        $.each( items, function( index, obj )

        {

            body += template.replace( //ig, obj[0] )

                            .replace( //ig, obj[1] );

        });

        $(‘#Tutorial’).append(body);

    });

    </script>

</html>

Share on FacebookShare on Twitter

Submit to StumbleUpon

Facebook
Twitter
LinkedIn
Email
Last Updated: February 1, 2020

Other Articles You Will Enjoy

Get Your Assessment

Thank you! We will be in touch with your results soon.
{{ field.placeholder }}
{{ option.name }}

Talk To Us

Talk To Us

Receive Book Updates

Fill out this form to receive email announcements about Crawl, Walk, Run: Advancing Analytics Maturity with Google Marketing Platform. This includes pre-sale dates, official publishing dates, and more.

Search InfoTrust

Leave Us A Review

Leave a review and let us know how we’re doing. Only actual clients, please.