Question

I’m familiar with the preferred method of creating elements with jQuery:

jQuery('<div/>', {
    id: 'foo',
    href: 'http://google.com',
}).appendTo('#mySelector');

But I need to create some elements with that are a little more complex than what the above does. Is there a way I can build my code so that it outputs something like:

<div id="foo" href="http://google.com"> 
   <h1> Heading </h1>
   <div id="child-div">
      Conetent created from jQuery vars
   </div>
</div>

Answer 1

You can simple pass the html string to the jQuery function

jQuery('<div id="foo" href="http://google.com"><h1> Heading </h1><div id="child-div">Conetent created from jQuery vars</div></div>')
.appendTo('#mySelector');

or create each element individually

jQuery('<div/>', {
    id: 'foo',
    href: 'http://google.com',
})
.append('<h1/>', {text: ' Heading '})
.append('<div/>', {id: 'child-div', text: 'Conetent created from jQuery vars'})
.appendTo('#mySelector');