使用jQuery添加另一個div

我正在循環瀏覽XML文件中的每個相關標記並執行此代碼。使用jQuery添加另一個div

$('<div class="product_image"></div>').html('<a href="'+url+'"><img src='+urlZoomImage+' /></a>').appendTo('#content'); 
$('<div class="product_title"></div>').html('<a href="'+url+'">'+title+'</a>').appendTo('#content');

我想圍繞product_image和PRODUCT_TITLE一個叫做product_box喜歡這個div：

<div id="content"> 
    <div class="product_box"> 
    <div class="product_image">My image code</div> 
    <div class="product_title">My title code</div> 
    </div> 
</div>

只有內容的div是寫在HTML，它必須保持這樣的（我不能寫在那裏的product_box代碼，因爲它是在每次成功的查找中生成的）。我該怎麼做呢？

在此先感謝。

來源

2012-11-14 Sara44

你追加要素'＃content'元素，但你有一個div元素與類content'的'！錯字？ – undefined

謝謝，這是一個錯字，現在修復了OP。 – Sara44

當您使用jQuery創建HTML元素時，您可能很容易迷失在代碼中。嘗試將變量中的單獨元素保存並在初始化後進行排列。像這樣：

var div_box = $('<div></div>').addClass('product_box'); 
var div_image = $('<div></div>').addClass('product_image').html('<a href="'+url+'"><img src='+urlZoomImage+' /></a>'); 
var div_title = $('<div></div>').addClass('product_title').html('<a href="'+url+'">'+title+'</a>'); 
$('#content').append(div_box.append(div_image).append(div_title));

來源

2012-11-14 12:20:53 Riplexus

是的，這很好，謝謝。剛剛編輯最後一行使其工作：$（'＃content'）。append（div_box.append（div_image）.append（div_title））; – Sara44

編輯與您的編輯工作的答案:) – Riplexus

只要使用相同的語法來創建.product_box:元素，然後其他內容追加，而不是到#content元素是元素。

var product_box = $('<div />', {'class' : 'product_box'}).appendTo('#content'); 
$('<div class="product_image"></div>').html('<a href="'+url+'"><img src='+urlZoomImage+' /></a>').appendTo(product_box); 
$('<div class="product_title"></div>').html('<a href="'+url+'">'+title+'</a>').appendTo(product_box);

來源

2012-11-14 12:22:36

var box = $('<div class="product_box"></div>'); 
var product_image = $('<div class="product_image"></div>').html('<a href="'+url+'"><img src='+urlZoomImage+' /></a>'); 
var produc_title = $('<div class="product_title"></div>').html('<a href="'+url+'">'+title+'</a>'); 

box.append(product_image,product_title).appendTo('.content');

Reference

來源

2012-11-14 12:22:55 Jashwant

使用jQuery添加另一個div

回答

相關問題