An easy way to generate HTML from top to bottom using jquery

Question

I am trying to process a JSON response and generate HTML from it. I would like to construct HTML "top to bottom":

entry = document.createElement('div');
entry.class = "Entry";
entry_title = document.createElement('div');
entry_title.appendChild(document.createTextNode('My entry title'));
// and so on

I would like to use jquery's HTML parsing capabilities to simplify the code. But I can't find a way to do this in jquery - its append method returns the calling object, but not the created one, so I'll have to make one more select to get it.

So the question is - how can I simplify the code above using jquery?

Answer 1

var entry = $('<div>').addClass('Entry').
append( 
    $('<div>').text('My entry title') 
)
.appendTo('body')

in reverse:

var entry = $('<div>').text('My entry title')
.wrap( 
    $('<div>').addClass('Entry') 
)
.parent().appendTo('body')

Answer 2

Try this:

$('body').append(
  $('<div>').addClass('Entry').append(
    $('<div').text('My entry title')
  )
);