Javascript 使用jQuery动态创建嵌套div

我需要动态创建几个div。第一个DIV将在

上创建，接下来的3个DIV将在新创建的DIV中。下面是我创建这个DIV的方法。请让我知道这是否是最好的方法

我想在jQuery中创建这个HTML

<div id="aTextDV" class="ui-widget-content">
    <div class="txmoPos">
        <img src="img/markers/img1.png"/>
    </div>
    <div class="txdlPos" id="dleTx" onclick="dTxt('aTextDV')">
        <img src="img/markers/img3.png"/>
    </div>
    <div class="txrsPos">
        <img src="img/markers/img2.png"/>
    </div>
</div>

jQuery（在本例中，我只创建了2个div）

$（文档）.ready（函数（）{
$（“按钮”）。在（“单击”，函数（）上）{
$（“正文”）。附加(
$('')
.attr（“id”、“aTextDV”）
.addClass（“ui小部件内容”）
);
$（'#aTextDV'）。追加(
$('')
.addClass（“txmoPos”）
.attr（“src”、“img/markers/move.png”）
);
})
})

如果您需要的内容是静态的-您可以使用方法-这更容易。

步骤1：缩小html

我使用这个网站：

步骤2：将缩小的html设置为javascript字符串，例如：

 var $divdata = '<div class="foo"><p>some child content</p><div><div></div></div></div>';

编辑 始终存储正常（未统一）html的备份。编辑缩小的html将是一个痛苦的屁股以后。最好保留未统一的html以便快速编辑，并在每次需要编辑时重复此过程。

$（文档）。就绪（函数（）{
$(document).ready(function() {
    $('button').on("click", function() {             
        $('body').append('<div id="aTextDV" class="ui-widget-content"></div>');
        $('#aTextDV').append('<div class="txmoPos"><img src="img/markers/move.png"/></div>');
        $('#aTextDV').append('<div class="txdlPos" id="dleTx" onclick="dTxt("aTextDV")"><img   src="img/markers/delete.png"/></div>');
        $('#aTextDV').append('<div class="txrsPos"><img src="img/markers/resize.png"/></div>');
    })
})

$（'button'）。在（“单击”，函数（）{
$（'body'）。追加（''）；
$（'#aTextDV'）。附加（''）；
$（'#aTextDV'）。附加（''）；
$（'#aTextDV'）。附加（''）；
})
})

而且它会浪费服务器上有限的资源（单个文件大小…）@AlekDepler js和css被缓存。感谢r3wt的提示。：）真的很有帮助+1但我更喜欢编写代码（我发布这个问题的目的是想知道如何编写代码）。@JonaNathali我刚刚向你展示了如何编写代码。我不知道您在上面的代码中做了什么，但这是非常错误的，但这是一次很好的尝试。如何将

aTextDV

的z索引设置为最高级别？您可以使用-：$（'#aTextDV'）.css（“zIndex”，10000）；

$('#aTextDV').append($divdata);

$(document).ready(function() {
    $('button').on("click", function() {             
        $('body').append('<div id="aTextDV" class="ui-widget-content"></div>');
        $('#aTextDV').append('<div class="txmoPos"><img src="img/markers/move.png"/></div>');
        $('#aTextDV').append('<div class="txdlPos" id="dleTx" onclick="dTxt("aTextDV")"><img   src="img/markers/delete.png"/></div>');
        $('#aTextDV').append('<div class="txrsPos"><img src="img/markers/resize.png"/></div>');
    })
})