Question

Given this element:

<div class="box" id="trololo">
     <h2 class="header gradient-red"></h2>
     <div class="body">
          <div class="queue">
               <ul class="queue-list">

               </ul>
          </div>
          <div class="time">

          </div>
     </div>
</div>

Which is a skeleton, I would like to insert it in the DOM, hidden and animate it’s entry. I really love this way, because it’s elegant:

jQuery('</div>',{
    id: 'trololo',
    class: 'box'
}).hide().appendTo('#anotherDiv').fadeIn('slow');

But, how could I chain multiple elements like this?

I’ve thought about adding the whole html in the html property but doesn’t sound fine for me.

Answer 1

Live Example

$("<div>", {
    className: 'box',
    id: 'trololo'
}).append(
    $('<h2>', {
        className: 'header gradient-red'
    }),
    $('<div>', {
        className: 'body'  
    }).append(
        $('<div>', {
            className: 'queue' 
        }).append(
            $('<ul>', {
                className: 'queue-list',
                textContent: 'dummy-text' 
            })  
        ),
        $('<div>', { 
            className: 'time' 
        }) 
    )
).hide().appendTo('#anotherDiv').fadeIn('slow');

Whether this is the ‘readability’ you were looking for is for you to decide.