[英]Creating nested DIVs on the fly using jQuery
我需要即時創建多個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")
);
})
})
步驟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以進行快速編輯，並在每次需要編輯時重復該過程。
$(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>');
})
})
如果您需要的內容是靜態的-您可以使用jquery.load方法-則容易得多。
動態創建谷歌圖表並將其附加到在 jquery 中動態創建的 div
[英]Creating and appending google charts on the fly to the divs created dynamically in jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.