Как создать список HTML с помощью JQuery

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

Попробуйте

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

Когда вы добавите же $li несколько раз вы просто двигаете его вокруг. Вам нужно создать новый для каждого добавления.

Answer 2

Вы добавляете один и тот же 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 в $(), что означает $("<li />") вместо $("<li>") иначе позже при обновлении JQuery вы будете иметь много работы, чтобы сделать.

Answer 3

Использование клона.

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

Answer 4

Вы можете использовать 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 5

Вы можете использовать время цикла:

var i = 1; 

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

Answer 6

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

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

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