Amiya Sahu Web Developer

How to create nested HTML elements in JQuery

JQuery 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