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

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);