Question

我目前正在追加以下内容：

$('.fbResults').append("<div class='fbItem'>");
$('.fbResults').append("<img src='images/ajax-loader.gif' class='imagePreloader' />");
$('.fbResults').append("<img src='"+imgUrl+"' class='img-polaroid' />");
$('.fbResults').append("<span class='fbNames'>Name</span>");
$('.fbResults').append("</div>");

我的问题是，结尾</div>似乎位于起始.fbItem之后，而不是结束顺序，因为我希望它出现。

上面的html结果追加：

<div class="fbItem"></div>
<img alt="Friends loading" class="imagePreloader" src="images/ajax-loader.gif">
<img class="img-polaroid" src="image">
<span class="fbNames">Name</span>

有什么想法吗？

Answer 1

当你致电.append()时，它会添加新元素，包括它的结束标记，所以你只需要一个接一个地附加每个元素。

你最好一次调用append()，将整个html作为字符串传递：

.append("<div class='fbItem'>"
        + "<img src='images/ajax-loader.gif' class='imagePreloader' />" 
        + "<img src='" + imgUrl + "' class='img-polaroid' />" 
        + "<span class='fbNames'>Name</span>" +
        "</div>");

Answer 2

您要将所有内容附加到单个div。将'.fbItem'div附加到'.fbResults'div，然后将所有其他内容附加到'.fbItem'div。当你将div附加到其他div而不关闭标记时，它会自动关闭div，不需要为它添加单独的结束标记。

你的代码是这样的：

jQuery('.fbResults').append("< div class='fbItem'">);

jQuery('.fbItem').append("< img src='images/ajax-loader.gif' class='imagePreloader' />");
jQuery('.fbItem').append("< img src='"+imgUrl+"' class='img-polaroid' />");
jQuery('.fbItem').append("< span class='fbNames'>Name</span>");

Answer 3

你必须在你的div中附加元素，因为在你的系统中你附加在div之后而不是在div中试试这个：

   $('.fbResults').append("<div class='fbItem'>");
   $('.fbItem').append("<img src='images/ajax-loader.gif' class='imagePreloader' />");
   $('.fbItem').append("<img src='"+imgUrl+"' class='img-polaroid' />");
   $('.fbItem').append("<span class='fbNames'>Name</span>");

Answer 4

这是应该的。通过jQuery创建新元素时，它会自动关闭标记。

将此内容添加为文本，或者从fbItem div创建变量，然后将其他元素附加到该变量。

Answer 5

您没有正确使用append方法。试试这个

var div = [];
div.push("<div class='fbItem'>");
div.push("<img src='images/ajax-loader.gif' class='imagePreloader' />");
div.push("<img src='"+imgUrl+"' class='img-polaroid' />");
div.push("<span class='fbNames'>Name</span>");
div.push("</div>");
$('.fbResults').append(div.join(''));

Answer 6

执行此操作时.append("<div class='fbItem'>");

jquery会自动附加结束标记</div>

演示--> http://jsfiddle.net/uVcrn/

你可以像这样绕过它 -

$('.fbResults').append($("<div class='fbItem'>")
.append("<img src='images/ajax-loader.gif' class='imagePreloader' />")
.append("<img src='"+imgUrl+"' class='img-polaroid' />")
.append("<span class='fbNames'>Name</span>"));

演示--> http://jsfiddle.net/uVcrn/2/

Answer 7

$('.fbItem').append("<div class='fbResults'>");请更改所有内容并尝试

Answer 8

您可以执行此操作以确保正确附加新创建的项目：

// Create all the dynamic elements
var $div = $("<div/>",{class:'fbItem'});
var $img1 = $("<img>", {src:'images/ajax-loader.gif', class:'imagePreloader'});
var $img2 = $("<img>", {src:imgUrl, class:'img-polaroid'});
var $span =  $("<span/>",{class:'fbNames', text:'Name'});

// Append the two images and the span to the dynamic div
$div.append($img1).append($img2).append($span);

// Finally append the div to 'fbResults'
$('.fbResults').append($div);

FIDDLE DEMO

Jquery .append结局错误

8 个答案: