javascript - jqueryを使用してhtmlリストを生成する方法

Question

次のコード (1) で次の出力 (2) が得られない理由

(1)

var $ul = $('<ul>');
var $li = $('<li>').text('text');
$ul.append($li);
$ul.append($li);
$ul.append($li);
$('<div>').append($ul);

(2)

<div>
   <ul>
     <li> text <li>
     <li> text <li>
     <li> text <li>
   </ul>
</div>

Answer 1

新しいものを作成するのではなく、同じliを何度も追加しています。

代わりに、html 文字列を作成して一度に追加することをお勧めします。

var strHTML = "<div><ul>";
strHTML += "<li>text</li>";
strHTML += "<li>text</li>";
strHTML += "<li>text</li>";
strHTML += "</ul></div>";
var elements = $(strHTML);

//OR in jQuery 1.8.0+    
//var elements = $.parseHTML(strHTML);

また、常に完全な html を に渡す必要があります。$()つまり、後で jQuery をアップグレードするときに、やらなければならないことがたくさんあります。$("<li />")$("<li>")

Answer 2

クローンを使用します。

$li.clone().appendTo('ul');

Answer 3

メソッドを使用できますclone()。

var $ul = $('</ul>');
var $li = $('</li>', {text:'text'});
$ul.append($li.clone());
$ul.append($li.clone());
$ul.append($li.clone());
$('<div/>').append($ul)

Answer 4

var $ul = $('<ul />');

for (i=0; i<3; i++) {
    $ul.append($('<li />', {text : 'text'}));
}

$('<div>').append($ul);

Answer 5

試す

$("<div/>")
    .append(
       $("<ul/>")
          .append(
              $("<li/>")
                  .text(" text ")
          )
          .append(
              $("<li/>")
                  .text(" text ")
          )
          .append(
              $("<li/>")
                  .text(" text ")
          )
    );

$li同じものを数回追加すると、移動するだけです。追加ごとに新しいものを作成する必要があります。

Answer 6

while ループを使用できます。

var i = 1;

while (i <= 3){
    $('ul').append('<li>Text</li>');
    i=i+1;
}