jquery - 使用 jQuery 添加另一个 div

Question

我循环遍历 XML 文件中的每个相关标签并执行此代码。

$('<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_box的div包围product_image和product_title，如下所示:

<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 代码，因为它是在每次成功查找时生成的)。我该怎么做呢？

提前致谢。

Answer 1

当您使用 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));