如何通過使用jQuery

生成一個HTML列表爲什麼下面的代碼（1）不給我下面的輸出（2）如何通過使用jQuery

（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>

來源

2012-08-29 js999

你一遍又一遍又一遍追加相同李，而不是創建一個新的。 –

爲什麼呢？即使您沒有添加相同的列表項，您也不會對您生成的HTML進行任何操作。此外，在提問時，最好描述你*看到的行爲，使問題更容易回答。 –

這裏發佈了很多不同的答案。其中一些建議創建新元素的不同方法。以下是關於要做什麼以及爲什麼的長篇討論：http://stackoverflow.com/questions/327047/what-is-the-most-efficient-way-to-create-html-elements-using-jquery –

嘗試

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

當您將追加相同$li幾次，你只是往前走。您需要爲每個追加創建一個新的。

來源

2012-08-29 14:18:54

您一遍又一遍地追加相同的li，而不是創建一個新的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);

此外，你應該總是傳遞comlete HTML到$()，當你升級的jQuery你將有很多工作要做的意義$("<li />")代替$("<li>")不然以後。

來源

2012-08-29 14:19:19

使用克隆。

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

來源

2012-08-29 14:19:51

您可以使用clone()方法。

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

來源

2012-08-29 14:20:02 undefined

你可以使用一個while循環：

var i = 1; 

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

來源

2012-08-29 14:22:01 Alex

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

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

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

來源

2012-08-29 14:29:49 adeneo

如何通過使用jQuery

回答

相關問題