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);

如果您想要的是将一个div包装为2个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()，但请注意，如果您正在调用.after() on的jQuery包含多个元素，它将在每个元素后附加参数的副本。

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');

使用jquery创建多个动态div

2 个答案: