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

Question

我尝试在 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 );

它只是创建一个像这样的堆栈:

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

正确的方法是什么？

Answer 1

jQuery 函数倾向于返回原始对象以允许链接 - 因此在这种情况下，对 append 的所有调用和对 attr 的调用都在 上完成>#图片。如果您确实想以这种方式构建它，则需要将其稍微拆分:

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