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的调用都在#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);

Answer 2

您可以随时在一行中完成所有操作：

$("#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>')

Answer 3

你在图像中附加了几个元素，因此它们不是嵌套的。试试

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

..或者只是一下子

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

3 个答案: