Ajaxで取得したデータをul要素を使ってリスト表示したいがうまくいかない場合

Ajaxで複数のデータを取得して、画面上にリスト形式で表示する方法について2通り解説します。

データを「AddList」というdiv要素に追加するには

jQuery("div#AddList").append(追加したいHTML);

で可能です。

HTMLでリストを表現するには

<ul>
    <li>データ１</li>
    <li>データ２</li>
    <li>データ３</li>
    <li>データ４</li>
</ul>

のように記述します。

うまくいかないパターン

以下のように記述してもうまくいきません。

jQuery("div#AddList").append("<ul>");

for(i = 0; i < datalist.length; i++){

    jQuery("div#AddList").append("<li>" + datalist[i] + "</li>");

}

jQuery("div#AddList").append("</ul>");

こうするとHTML上は以下のようになってしまい、リストとして機能しません。

<ul></ul>
<li>データ１</li>
<li>データ２</li>
<li>データ３</li>
<li>データ４</li>

解決方法①

1つ目の解決方法は、まずul要素を生成してからそこにli要素を追加する方法です。

jQuery("div#AddList").append("<ul id='Target'></ul>");

for(i = 0; i < datalist.length; i++){

    jQuery("ul#Target").append("<li>" + datalist[i] + "</li>");

}

ul要素にidを指定して、そのul要素に向けてリストを追加するようにしています。

解決方法②

2つ目の解決方法は、HTMLを文字列で組み立てて一気に追加する方法です。

var sHTML = "";
sHTML += "<ul>";
for(i = 0; i < datalist.length; i++){

    sHTML += "<li>" + datalist[i] + "</li>";

}
sHTML += "</ul>";

jQuery("div#AddList").append(sHTML);

<ul><li>～</li></ul>までのHTMLを文字列として最初に組み立ててしまいます。
その後でdiv要素に対して組み立てたHTMLを追加します。