jquery - 使用 jquery 创建多个动态 div

Question

我正在使用以下代码在新 div 中动态创建 div：

var obj = {
  name: 'item'
};

obj.html = jQuery('<div/>', { class: 'recommended' });
obj.html += jQuery('<div/>', { class: 'bestbuy' });

jQuery('<div/>', obj).appendTo('#wrapper');

所以，基本上它应该创建这样的东西：

<div id="wrapper">
  <div name='item'>
    <div class="I_will_be_inside_obj"></div>
    <div class="I_will_also_be_inside_obj"></div>
  </div>
</div>

问题是这只适用于一个附加的div，当我尝试附加第二个时，我得到的是：

<div id="wrapper">
  <div name='item'>
    [object Object][object Object]
  </div>
</div>

任何想法为什么，以及如何解决这个问题？提前致谢。

Answer 1

那是因为创建的 dom 片段必须是一个元素。你可以这样做：

jQuery('<div/>').addClass('I_will_be_inside_obj').appendTo('#wrapper');
jQuery('<div/>').addClass('I_will_also_be_inside_obj').appendTo('#wrapper');

或者

var obj = { };
obj.html = jQuery('<div/>').addClass('I_will_be_inside_obj');
obj.html += jQuery('<div/>').addClass('I_will_also_be_inside_obj');
jQuery('#wrapper').html(obj.html);

如果您想要制作一个包装 2 个 div 的 div，请使用以下命令：

var obj = { };
var div = $('<div/>').appendTo('#wrapper');
jQuery('<div/>').addClass('I_will_be_inside_obj').appendTo(div);
jQuery('<div/>').addClass('I_will_also_be_inside_obj').appendTo(div);

Answer 2

jQuery 返回的是一个类似数组的对象。你不能这样使用+=它。

对于这个特定示例，您可以使用.after()，但请注意，如果您调用的 jQuery.after()包含多个元素，它将在每个元素之后附加参数的克隆。

var underConstruction;

underConstruction = jQuery('<div/>', { class: 'I_will_be_inside_obj' });
underConstruction.after(jQuery('<div/>', { class: 'I_will_also_be_inside_obj' }));

jQuery('<div/>').append(underConstruction).appendTo('#wrapper');