jquery - Jquery .append の場所の末尾

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

これを行うと、新しく作成されたアイテムが正しく追加されていることを確認できます。

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

フィドルのデモ

Answer 4

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 5

これを行うと.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/