I think all web developers have a love / hate relationship with HTML.

HTML is by it’s very definition a MARKUP language. Markup meaning it’s category of utility is to represent data. HTML is fine for representing data for display but less perfect when it comes to use case’s that require the manipulation of that data once it’s been rendered. As a “markup” language, the semantic values are not innately coupled to the markup items that contain them.

The software development industry continuously invents new ways to improve the ways that we solve this relationship problem.

I’ve been working on a Single Page HTML App which will be data drivel via a JSON file retrieved from the server.

That JSON file will contain some number of data records and the app will need to create one container div for each of those records. Since the number of those records is variable, the App won’t know until run time (when the page is loaded) how many of those sections will be needed.

Each of the container divs will contain HTML elements that will need to be manipulated at run time. (In fact, in the app I’m forking on each container will have a variable number elements, also dynamically created at run-time but for the purposes of this sample we’ll keep thinks to a single level of dynamics).

Dynamically naming elements can quickly become complex with dynamic HTML pages and, as is always there are many ways to solve the same problem. (Yes, I know, your way is better :) )

Here is a documented example of ONE way to accomplish this content / data dynamics using jQuery (though you could use the same pattern in plain old JavaScript).

It takes very little code, but several people have questioned me as to how to do this so I thought I’m post a sample.


<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script 
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>

<script>
var numberOfDivsToCreate=10;
//---------------------------------------------------------------------------+
// Note the id of the div to be appended is dynamic comprised of the static
// text "DIV-NUMBER" and the current value of the i variable of the for loop.
//---------------------------------------------------------------------------+
$(document).ready(function () {
    //-----------------------------------------------------------------------+
    // for loop create the total number of divs specified in the
    // numberOfDivsToCreate variable above. In a real app this would probably
    // be determined at run time
    //-----------------------------------------------------------------------+
    for (var i = 1; i <= numberOfDivsToCreate; i++) {
        $('#mainpage').append("<div id='DIV-NUMBER-" + i + "'>" +
                          "<span id='myInput''>" + i + "</span>" +
                          "&nbsp;--&nbsp;<span id='myVal'></span></div>");
    }

    //-----------------------------------------------------------------------+
    // Use the jQuery.on method to specify an event delegate to handle click
    // events for all the divs inside the div who's id="mainpage"
    // Note: In this sample we arw catching the click event for ALL divs
    // In a real world app your mainpage div may contain divs that you do not
    // want to fire a click event on, In that case use a class on the
    // clickable ones and change the jQuery selector below accordingly,
    //-----------------------------------------------------------------------+
    $( "#mainpage" ).on( "click", "div", function() {

        //-------------------------------------------------------------------+
        // The for loop above creates 10 divs and this click event delegate
        // is a SINGLE method (lives in memory once) to handle the click
        // events for all 10 divs
        // $this is a jQuery reference to the element that threw the click
        // event in our case one of the 10 divs
        //-------------------------------------------------------------------+
        // we'll use .find() to look inside the div that threw the click
        // event and find the elements we wish to manipulate, note that
        // those elements are not dynamically named (myInput & myVal) so
        // there are 10 of each on our page and we are using context to
        // determine which to manipulate
        //-------------------------------------------------------------------+
        // jQuery .find() can be a performance problem if misused, make
        // sure to minimise the find scope as much as possible
        //-------------------------------------------------------------------+
        var MyInput =$(this).find("#myInput");
        var MyDisplay = $(this).find("#myVal");

        //-------------------------------------------------------------------+
        // Note that MyInput & MyDisplay local variables that we cast to
        // jQuery objects on order to access the text properties via jQuery
        // syntax.
        //-------------------------------------------------------------------+
        $(MyDisplay).text($(this).attr("id") +
                "   -   Value = " + $(MyInput).text())
    });
});
</script>

</head>
<body>
<div id="mainpage">
</div>
</body>
</html>