About good practices for creating and appending elements with JS

Question

Example code

var jqxhr=$.getJSON("http://search.twitter.com/search.json?callback=?",{q:query},
                function(data) {
                    ... question.               
                });

Question

Now i need to create for each tweet result something like this (for example...)

<article class="tweet">
    <header>
        <img class ="tweet_img"src="data.profile_image_url"/> 
    </header>
    <p class="tweet-text">data.text</p> 
</article>

Well, i know several ways to append each result to the document:

1. Creating a big HTML string and add the data from JSONP and append this to some container.
2. Create a p element, a header element... work with them and after that append a final Element to some container.

Now the question is: with your experience what is the correct way to do this?
I mean the correct way using good principles.

Please dont ask about the html, it's dumb example.
Thanks.

Answer 1

Well, best practices will tell you not to use the innerHTML property of a DOM element, which is what you'd be doing with option 1. But unless you are concerned about immediately operating on the code with Javascript, attaching events, or security concerns around tag injection (I don't know how much this is an issue anymore) then creating an HTML string and inserting it using innerHTML is going to be a lot quicker and easier to update.

Answer 2

There are several valid approaches that each have their own advantages...

The technique of just generating the HTML as a string in your java code and adding it with .innerHTML is known to be one of the fastest performing approaches...but it provides very little validation of your HTML.

Alternatively, you can build the HTML using DOM methods directly, creating tags and appending them to build the structure. This is generally safer in that you have more validation going on, but the DOM methods are extremely wordy, which makes them a bit painful to type...and the code is even more verbose as you have to add attributes one at a time as well.

My personal preference, especially since you're already using JQuery, would be to build the tags and text nodes using JQuery, and put them together using JQuery, which allows you to do so in bite-sized, more human-verifiable units, without becoming overly verbose.

This also has the advantage that JQuery's methods of producing new tags give you additional support for older browsers that did not adhere to DOM standards. Hopefully you don't actually have to care whether your page works for those older browsers, but more compatibility never hurts either.

In that approach, you'd write something like the following:

var article = $('<article class="tweet"></article>');
var header = $('<header></header>');
var image = $('<img class="tweet_img" src="' + data.profile_image_url + '"></img>');
var tweet = $('<p class="tweet-text">' + data.text + '</p>');

header.append(image);
article.append(header, tweet);
$("#id_of_content_area_to_add_the_tweet_to").append(article);

Answer 3

The cleanest way I know how is to use a template system like Mustache, instead of "HTML in JS"

var template = html_string,                   //HTML from a string or from AJAX
    data = {...data...},                      //structured data
    html = $(Mustache.render(template,data)); //wrap in jQuery to operate

html.appendTo(somewhere_in_DOM);

Answer 4

If you want to attach some event handlers to the elements then you should generate them separately.

But if you don't want to attach any event handler then i will recommend first method

$("body").append('<article class="tweet"><header><img class ="tweet_img" src="'+data.profile_image_url+'"/></header><p class="tweet-text">'+data.text+'</p></article>')

Answer 5

I will recommend you to use some Template engine like Handlebars.js Which is the right solution for your problem.

Which is having many more options which has many more conditional options which can be useful in feature. Just visit the above link you will have some idea.