Question

I have been using $.get to get the contents of my lightbox

$.get('sidebar-lightbox.html', function(data, elem) {

//DO STUFF HERE
 });

I am looking for neat way to add large(ish), maybe 20 lines, of HTML into append. At the moment am doing

 $('.selector').append('<div id="wrapper"><div id="inner"><div id="content"></div></div></div>')

this is a bit messy and unreadable as the html gets bigger, looking for a nice way :).

Answer 1

$('<div/>', { id: 'wrapper' }).appendTo('.selector');
$('<div/>', { id: 'inner' }).appendTo('#wrapper');
$('<div/>', { id: 'content' }).appendTo('#inner');

If you prefer, you could also have done something like:

$('<div/>', { id: 'wrapper' }).append(
    $('<div/>', { id: 'inner' }).append(
        $('<div/>', { id: 'content' })
     )
).appendTo('.selector')​;

You can of cours set any number of attributes here, remember to put the ones that are JavaScript keywords in strings, i.e. $('<div/>', { id: 'id', 'class': 'x' }). You could also chain multiple .attr and .html calls to get the markup you want.