Dynamic (AJAX) HTML creation

Question

I'm seeking input on this topic, as explained below. In particular I am looking for a "best known method" or design pattern regarding how to dynamically build HTML.

This is a very common task for me: Submit something to a server via a POST --> get a list of results back in JSON format --> take this list of 0 to n results and display them, often as a list. This usually means building the actual HTML in Javascript (jQuery) with something like:

HTMLResult = "<div id=....     "
HTMLResult = HTMLResult + JSONDataElement
HTMLResult = "</div>"
...

Then I add each element using jQuery or bundle them up and replace the HTML of some container div.

I'm sick of doing this. It's error prone, ugly, inefficient, etc...

I'd much rather do something more OO. Perhaps an Element would be defined somehow - is it in a div, span, what does it contain... so that I can do something like this:

tempElement = new Element
tempElement.text = JSONData.text
ResultsList.addElement(tempElement)

I am seeking any input on better ways to do what I've described. I prefer a minimal toolset: HTML, CSS, jQuery.

(Also what about building the HTML on the backend, in this case, Django)?

Answer 1

Why don't you think of writing generic function with the parameters for target Dom Element and the data to be added? You can think of a generic method like:

function GenericAjaxResponseHandler(TargetElement, AjaxResponse)
{
    //Implemet the handler here
}

Answer 2

As you mentioned, the easiest way to create new elements is on backend, where you have absolute control over creation in pure html.. While on client side you have to create all those elements programatically. However the biggest downside of this method is that you kill reusability of the JSON provider.

If you are interested in data reusability, a RESTful like system and OOP element creation, I would suggest Dean Edward's Base JS class, which simplifies OOP in JavaScript and may help you a lot in creating your custom elements and builders.

With Base you can create an easy class hierarchy, which makes your code readable and maintainable.

If one of your concerns is jQuery element creation efficiency, read this question

Answer 3

Cloning elements is supposedly quite fast, so what I sometimes do is include templates of the elements to be generated in the initial page, with display: none. Then, when I receive data from the server, I can

var newElement = $('#some-template').clone().removeAttr('id');

Then, it depends on how much must be replaced. Sometimes I just set the required attributes and set the text etc., sometimes I have placeholders in the template and go something like

newElement.html(newElement.html().supplant(paramObj));

where paramObj holds the values to replace the placeholders, and supplant is taken from Crockford. Modifying the String prototype is not without issues, of course, but can, in this case, easily be avoided by using a function.

Answer 4

1. Ask the web designer to create a pretty dummy list if he/she hasn’t already created one
2. Remove all the dummy list elements but one
3. Hide the last remaining list element (e.g. display:none)
4. In the last remaining element, create placeholders for the variables sent by the server (e.g. span)
5. In your JavaScript, deep-clone the element, make the substitutions, make the element visible, and attach the element to the proper node

I would not generate the HTML on the server.