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

你可以使用一个while循环：

var i = 1;

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

Answer 6

尝试

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

当您$li多次附加相同的内容时，您只是在移动它。您需要为每个追加创建一个新的。