Easy Javascript Templating- Web Development

Estimated Reading Time: 2 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
Originally Published: August 16, 2012
May 31, 2023
Originally published on August 16, 2012

Other Articles You Will Enjoy

InfoTrust Earns Gold-Level Partnership with Optimizely in Recognition of Growing Expertise

InfoTrust Earns Gold-Level Partnership with Optimizely in Recognition of Growing Expertise

InfoTrust is thrilled to announce it has been certified as a Gold Partner of Optimizely, the leading digital experience platform (DXP) provider. To achieve…

3-minute read
So You’re Switching from Google Optimize to Optimizely : 6 Key Things to Know

So You’re Switching from Google Optimize to Optimizely : 6 Key Things to Know

Well, we’ve had a good run but our time with Google Optimize is coming to an end. By now you’ve probably heard that Google…

10-minute read

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.