Question

我需要动态创建几个DIV。第一个DIV将在<body>上创建，接下来的3个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）

$(document).ready(function() {
    $('button').on("click", function() {
        $("body").append(
    $('<div/>')
      .attr("id", "aTextDV")
      .addClass("ui-widget-content")
    );
    $('#aTextDV').append(
    $('<div/>')
      .addClass("txmoPos")
      .attr("src", "img/markers/move.png")
    );
    })
})

Answer 1

第1步：缩小html。

我使用这个网站：

http://www.willpeavy.com/minifier/

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

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

第3步：将div附加到容器

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

修改始终存储正常（非透明）html的备份。编辑缩小的html将是后来的痛苦。最好保持未经通知的html进行快速编辑，并在每次需要编辑时重复此过程。

Answer 2

$(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>');
    })
})

Answer 3

如果您需要的内容是静态的 - 您可以使用jquery.load方法 - 它会更容易。

使用jQuery动态创建嵌套DIV

3 个答案: