CODEWITHSUNDEEP
jqueryhtml
ZioTano
ZioTano

Reputation: 67

create nested divs with jquery

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.

Upvotes: 2

Views: 13436

Answers (3)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67217

You have to use .appendTo() in this context.

Try,

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

DEMO

Upvotes: 2

Jai
Jai

Reputation: 74738

try this:

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

Demo

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388436

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

Upvotes: 11

Related Questions