Building Dynamic HTML Markup with JavaScript - the Basics

When you need to iterate over a data set, and build markup using its elements, there are a few techniques that make this a snap

Sometimes you may need to build markup and insert it into the page, but perhaps you do not know what that markup will be. Actually, you would probably know most of what will happen: you have some markup that needs to be repeated one or more times, and in each iteration, the text in certain elements will change. A typical scenario is one in which you have multiple records in a data set, and you need to create a series of elements that will be similar, but each row in the data set will have it’s own copy of the markup and display its values. Same markup, but unique values with each iteration.

Example # 1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Dynamic Markup with JavaScript Example</title>
       <script language="javascript"  src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    </head>
	<script id="demo" type="text/javascript">
		$(document).ready(function() {
			// our array of objects for some data to play with
			var arr = [
				{ fname : "Bart", lname : "Simpson", email: "bsimpson@somedomain.com"},
				{ fname : "Alfred E", lname : "Newman", email: "aenewman@somedomain.com"},
				{ fname : "Steve", lname : "Austin", email: "saustin@somedomain.com"}
			]

			var i = 0,
				arrLen = arr.length - 1
				str = "";
			// loop through all elements in the array, building a form for each object
			for (; i <= arrLen; i++ ) {
			str = str + '<form>'
							+ '<label for="fname"><b>First Name:</b></label> <input type="text" name="fname" size="20" value="' + arr[i].fname + '" />'
							+ '<label for="lname"><b>Last Name:</b></label> <input type="text" name="lname" size="20" value="' + arr[i].lname + '" />'
							+ '<label for="email"><b>Email:</b></label> <input type="text" name="email" size="20" value="' + arr[i].email + '" />'
							+ '<button type="submit">Submit</button>'
						+ "</form>";
			};
			//append the markup to the DOM
			$("#foo").html(str);
		});
	</script>
    <body>
		<div id="foo"></div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Dynamic Markup with JavaScript Example</title>

</head>

$(document).ready(function() {

// our array of objects for some data to play with

var arr = [

{ fname : "Bart", lname : "Simpson", email: "bsimpson@somedomain.com"},

{ fname : "Alfred E", lname : "Newman", email: "aenewman@somedomain.com"},

{ fname : "Steve", lname : "Austin", email: "saustin@somedomain.com"}

]

var i = 0,

arrLen = arr.length - 1

str = "";

// loop through all elements in the array, building a form for each object

for (; i <= arrLen; i++ ) {

str = str + '<form>'

+ '<label for="fname"><b>First Name:</b></label> <input type="text" name="fname" size="20" value="' + arr[i].fname + '" />'

+ '<label for="lname"><b>Last Name:</b></label> <input type="text" name="lname" size="20" value="' + arr[i].lname + '" />'

+ '<label for="email"><b>Email:</b></label> <input type="text" name="email" size="20" value="' + arr[i].email + '" />'

+ '<button type="submit">Submit</button>'

+ "</form>";

};

//append the markup to the DOM

$("#foo").html(str);

});

</script>

<body>

</body>

</html>

In Example # 1, we first created our data set (the variable “arr”), which is a JavaScript array. Each element of the array is an object literal, containing three fields. We then proceed to loop through all the elements of the array and for each one, we create a form. In each form, we mix the markup (which is the same with each iteration), but mix in the values from the data set so that when finished, each element in our data set has its own HTML form (think of it as rows in a table or records in a database). When we are finished creating the markup, we simply use the jQuery .html() method to insert our markup into the DOM, using the ID of a specific HTML element.

Two Quick Notes:

Variable Declarations – When declaring multiple variables, keep in mind that you can do so with one “var” statement, and separate each variable name with a comma. This makes things a bit easier to read and some argue that it is faster.

String Concatenation – Instead of one insanely long string, you can use the “+” operator, and break your assignments into multiple lines. Although this is JavaScript, it makes it look a bit more like actual markup.

Summary

There are, of course, much more elegant ways to do this; John Resig’s JavaScript Micro-Templating technique is a cool example. And there are plenty of others out there. Here, I’ve simply covered the basic concept of working with data, and creating HTML on the fly to present that data in the page, regardless of the amount of data, or values it contains.

Helpful links for building dynamic HTML markup with JavaScript

http://markalexanderbain.suite101.com/an-introduction-to-dynamic-html-with-javascript-a74777

http://www.scriptingmaster.com/javascript/outputting-dynamic-HTML.asp

http://stackoverflow.com/questions/6106402/php-vs-javascript-for-dynamic-html-pages