QA@IT

jQueryのappendで要素を追加する方法

21028 PV

お世話になっております。
jQueryのappendを使って要素を追加したいです。
追加するデータはJSON形式で保持しておりeachでループ処理をします。
JSON形式のデータは多次元配列です。

出力したいhtml(以下のようにulタグにliを追加したいです。)

<ul id=list>
<li id=xxx>
<dl>
<dt><a href="#"><img src="image.jpg alt="photo"></a></dt>
<dd>
  <a href="#">aaaaaaaaaaaa</a><br>
  <a href="#">bbbbbbbbbbbb</a><br>
</dd>
</dl>
</dt>
</li>

jQuery

$.each(data,function(key , value){
$('#list').append($("<li>").attr("id",value['id']));
$('#list').append($("<dl><dt><a>").attr("href","#"));
$('#list').append($(<img>").attr({"src":"image.jpg","alt":"Photo"}));                   



});

このような感じでやってみているのですが入れ子がうまくいきません。
上記だとimgタグがaタグの外に出てしまいます、どうすれば入れ子にできるのかご教示お願いします。

回答

こんな感じではないでしょうか

$.each(data, function(key , value){
    $('#list').append(  
        $("<li/>").attr("id",value['id']).append(
            $("<dl/>").append(
                $("<dt/>").append(
                    $("<a/>").attr("href","#").append(
                        $("<img/>").attr({"src":"image.jpg","alt":"photo"})
                    )
                )
            ).append(
                $("<dd/>").append(
                    $("<a/>").attr("href", "#").text("aaaaaaaaaaaa"),
                    $("<a/>").attr("href", "#").text("bbbbbbbbbbbb")
                )
            )
        )
    )
})
編集 履歴 (0)
  • ありがとうございます。無事要素を追加することができました。 -

解決しているようですが、パフォーマンス的に余り宜しくないのコメント致します。
同じ要素を複製する場合は、$.fn.cloneの多用したほうがいいです。
Firefox、Chrom、IE9以上だとどんな書き方でもパフォーマンス的にさほど変わらないですが、
IE8以下で古いバージョン程愕然とするほどパフォーマンスが悪くなってきます。
可読性とパフォーマンスを考慮するとこんな感じだとおもいます。

var data = {
     a:{id:'aa', hoge:1111, foo:2222}
    ,b:{id:'bb', hoge:3333, foo:4444}
}
var $target = $('#list');
var $src = $("<li><dl><dt><a><img /></a></dt><dd></dd></dl></li>");
var $infosrc = $('<a />');

$.each(data,function(key , value){
    $item = $src.clone();
    $item.attr("id",value['id']);
    $item.find("a:first").attr("href","#");
    $item.find("img:first").attr({"src":"image.jpg","alt":"photo"});
    $info = $item.find("dd:first");
    for(var k in value) {
        if('id'==k) {continue;}
        $infoitem = $infosrc.clone();
        $infoitem.attr('href', '#').text(value[k]);
        $info.append($infoitem);
    }
    $target.append($item);
});
編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。