Create new DOM elements with children elements in jQuery

Question

I want to create following elements

<span>
    <h3>Title</h3>
    <p>This is paragraph</p>
</span>

I want to do above using jquery in following manner.

$('<span />', {
}).appendTo('body');

How can I create children element of span with above method?

Answer 1

Fiddle Demo

$('<span />', {})
    .append($('<h3/>').text('Tite'))
    .append($('</p>').text('para'))
    .appendTo('body');

---

or

Fiddle Demo

 $('<span />', {}) .append(function () { return '<h3>Title</h3><p>This is paragraph</p>'; }).appendTo('body'); 

---

Fiddle Demo

 $('<span />', {}) .append($('<h3/>').text('Tite'), $('</p>').text('para')) .appendTo('body');