jquery在div中而不是在堆栈中创建div

我尝试在一个div中创建一个div，然后在该div中创建一个图像。 这是我的尝试：

$("#images").append('<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4"></div>')
                          .append('<div class="div-content"></div>')
                          .append("<img>").attr( "src", item.media.m );

$（“#图像”）。附加（“”）
.append（“”）
.append（“
相反，它只是创建了如下堆栈：

<div id="images" src="https://farm4.staticflickr.com/3842/14497175986_683bd74acf_m.jpg">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4"></div>
    <div class="div-content"></div>
    <img>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4"></div>
    <div class="div-content"></div>
    <img>



正确的方法是什么？
jQuery函数倾向于返回原始对象以允许链接-因此在本例中，对
append
的所有调用和对
attr
的调用都是在
#images
上进行的。如果您确实希望以这种方式构建它，则需要将其拆分一点：

var i = $("<img>").attr( "src", item.media.m );
var d2 = $('<div class="div-content"></div>');
var d = $('<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4"></div>');
d2.append(i);
d.append(d2);
$("#images").append(d);

var i=$（“'）；
变量d=$（''）；
d2.附加（i）；
d、 追加（d2）；
$（“#图像”）。追加（d）；
您在图像中添加了多个元素，因此它们不会嵌套。
试一试

$（“#图像”）。附加（“”）；
$（“.col-xs-12”）。附加（“”）；
$（“div content”）.append（'img…'）；

…或者一次完成所有操作
您始终可以在一行中完成所有操作：

$("#images").append('<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4"><div class="div-content"><img src="' + item.media.m + '"/></div></div>')

$（“#图像”）。附加（“”）
如果您在一个循环中，并且需要在同一级别上多次追加，则此功能非常有用-将一个变量声明到您希望在循环外部追加的级别，并在循环中继续追加到该级别
$("#images").append('<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4"><div class="div-content"><img src="' + item.media.m + '"/></div></div>')