Как собрать <ul>, используя jQuery append ()?

Question

Я пытаюсь использовать функцию добавления и столкнулся с этим:

$("#details").append('<ul>');
for (var i = 0; i < 10; i++) {
    $("#details").append('<li>something</li>');
}
$("#details").append('</ul>');

Похоже, что элементы <li> отображают ВНЕ тег <ul>.

Это ошибка jQuery?

Answer 1

Нет, вы не можете использовать это так. append - это атомарная операция, которая создает элемент напрямую.

// The <ul> element is added to #details, then it is selected and the jQuery
// selection is put in the "list" variable.
var list = $('<ul/>').appendTo('#details');
for (var i = 0; i < 10; i++) {
    // New <li> elements are created here and added to the <ul> element.
    list.append('<li>something</li>');
}

В качестве альтернативы, сгенерируйте HTML и добавьте все сразу (это будет больше похоже на ваш оригинальный код):

var html = '<ul>';
for (var i = 0; i < 10; i++) {
    html += '<li>something</li>';
}
html += '</ul>';
$('#details').append(html);

Этот код заметно быстрее при работе со многими элементами.

Если вам нужна ссылка на список, просто сделайте следующее вместо $('#details').append(html);:

var list = $(html).appendTo('#details');

Answer 2

Нет, это ошибка программиста. <li> s прикреплены к их <ul> или <ol>, а не к их контейнеру. И добавление тега close бессмысленно.

Вы в основном работаете так, как будто то, что вы добавляете, является необработанным HTML, а это не так; вы на самом деле работаете с DOM.

Попробуйте это:

var list = $("#details").append('<ul></ul>').find('ul');
for (var i = 0; i < 10; i++)
    list.append('<li>something</li>');

Примечание: см. (И upvote) ответ Blixt, который расширяет пару различных вариантов, которые превосходят различные цели Он заслуживает внимания и не получил его.

Answer 3

Я думаю, что есть проблема в вашем цикле

for (var i = - i < 10; i++)
    $("#details").append('<li>something</li>');

должно быть я думаю

for (var i = 0; i < 10; i++)
    $("#details ul").append('<li>something</li>');

и с конца теряйте следующее

$("#details").append('</ul>');

Рабочая демоверсия

EDIT:

На основании комментария Георга IV, чтобы избежать добавления элементов <li> к любому <ul>, который может быть потомком элемента с идентификатором " details ", просто укажите элемент <ul> идентификатор, когда вы добавляете его -

$("#details").append('<ul id="appended">');

for (var i = 0; i < 10; i++)
    $("#appended").append('<li>something</li>');

Вы также можете найти эту статью интересной - 43 439 причин для правильного использования append ()

Answer 4

Для небольшого статического списка я предпочитаю развернуть в одно выражение.

$('#details')
   .append($('<ul/>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
   );

Answer 5

Я бы использовал что-то вроде, если у вас есть данные в массиве.

var appendToUl = array.join ("

+ array + ");

Это намного быстрее