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