How to create nested HTML elements in JQuery
06 Oct 2016JQuery code
var $elem = $('body div.main');
$elem.append(
$('<div/>', {'class': 'wrapper'}).append(
$('<div/>', {'class': 'inner'}).append(
$('<span/>', {text: 'Some text'})
)
).append(
$('<div/>', {'class': 'inner'}).append(
$('<span/>', {text: 'Other text'})
)
)
);
Result
<div class="main">
<div class="wrapper">
<div class="inner">
<span>Some text</span>
</div>
<div class="inner">
<span>Other text</span>
</div>
</div>
</div>
Here is a live example