使用jquery创建嵌套的div

Question

我必须使用jquery .append（）

动态创建嵌套的div

但是通过这段代码：`

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

我得到了错误的输出

<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>

哪里错了？ 谢谢。

Answer 1

您需要将输入和标签附加到row元素

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

演示：Fiddle

Answer 2

您必须在此上下文中使用.appendTo()。

尝试，

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

DEMO

Answer 3

试试这个：

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

Demo