create nested divs with jquery

Question

I have to dinamically create nested divs using jquery .append()

But by this code:`

html=$("<div class='table'>")
    .append($("<div class='row'>"))
    .append($("<label>Denominazione Gruppo</label>"))
    .append($("<input type='text' id='denominazione'>"));
$("#content").empty();
$("#content").append(html);`

i get this wrong output

<div id="content">
    <div class="table">
        <div class="row"></div>    //this closed tag should not be here!
        <label>Denominazione Gruppo</label>
        <input type="text" id="denominazione">
    </div>
</div>

Where i wrong? Thank you.

Answer 1

You need to append the input and label to the row element

html = $("<div class='table'>").append($("<div class='row'>")
    .append("<label>Denominazione Gruppo</label>")
    .append("<input type='text' id='denominazione'>"));
$("#content").empty();
$("#content").append(html);

Demo: Fiddle