Как добавить элемент списка в существующий неупорядоченный список?


548

У меня есть код, который выглядит так:

<div id="header">
    <ul class="tabs">
        <li><a href="/user/view"><span class="tab">Profile</span></a></li>
        <li><a href="/user/edit"><span class="tab">Edit</span></a></li>
    </ul>
</div>

Я хотел бы использовать jQuery, чтобы добавить следующее в список:

<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>

Я попробовал это:

$("#content ul li:last").append("<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>");

Но это добавляет новый li внутри последнего li(непосредственно перед закрывающим тегом), а не после него. Какой лучший способ добавить это li?

Ответы:


816

Это сделало бы это:

$("#header ul").append('<li><a href="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');

Две вещи:

  • Вы можете просто добавить <li>к <ul>себе.
  • Вам нужно использовать кавычки противоположного типа, чем те, которые вы используете в своем HTML. Так как вы используете двойные кавычки в своих атрибутах, окружите код одинарными кавычками.

6
Разве это не должно быть «#header» вместо «#content»?
Дипак

15
просто как примечание, вы можете использовать prepend вместо append, если хотите добавить первый элемент вместо последнего
Thomas

517

Вы можете сделать это также более «объектным способом» и все же легко читаемым:

$('#content ul').append(
    $('<li>').append(
        $('<a>').attr('href','/user/messages').append(
            $('<span>').attr('class', 'tab').append("Message center")
)));    

Вы не должны бороться с кавычками тогда, но должны держать след скобок :)


Разве ваш подход не запускает новые теги, но не закрывает их?
Эвертон

1
Нет, jquery создает теги с использованием DOM-манипуляций, поэтому ему нужно знать только его имя
Danubian Sailor

Мне это нравится. Я ненавижу возиться со строками и кавычками :) Кстати: другой вариант будет stackoverflow.com/a/4673436/112000
Томаш Фейфар

2
Это намного более предпочтительный способ, то есть использование более объектно-ориентированного подхода.
Будет

Есть ли возможность добавить мульти одновременно?
тянь

51

Как насчет использования «после» вместо «добавить».

$("#content ul li:last").after('<li><a href="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');

«.after ()» может вставлять содержимое, указанное параметром, после каждого элемента в наборе соответствующих элементов.


3
Спасибо, это помогло мне. Чтобы вставить в середину списка, вам нужно использовать beforeили after.
Патрик Фишер

1
это в сочетании с ответом @ Danubian_Sailor поразило меня
bkwdesign

50

Если вы просто добавляете в него текст li, вы можете использовать:

 $("#ul").append($("<li>").text("Some Text."));

20

jQuery поставляется со следующими опциями, которые могут удовлетворить ваши потребности в этом случае:

appendиспользуется для добавления элемента в конец родительского элемента, divуказанного в селекторе:

$('ul.tabs').append('<li>An element</li>');

prependиспользуется для добавления элемента в начало / начало родительского элемента, divуказанного в селекторе:

$('ul.tabs').prepend('<li>An element</li>');

insertAfterпозволяет вам вставить элемент вашего выбора после следующего элемента, который вы укажете. Созданный вами элемент будет помещен в DOM после указанного тега закрытия селектора:

$('<li>An element</li>').insertAfter('ul.tabs>li:last');
will result in:
<li><a href="/user/edit"><span class="tab">Edit</span></a></li>
<li>An element</li>

insertBefore сделаем противоположное вышесказанному:

$('<li>An element</li>').insertBefore('ul.tabs>li:last');
will result in:
<li>An element</li>
<li><a href="/user/edit"><span class="tab">Edit</span></a></li>

16

Вы должны добавить к контейнеру, а не последний элемент:

$("#content ul").append('<li><a href="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');

Функция append () , вероятно, должна была вызываться add () в jQuery, потому что она иногда сбивает людей с толку. Вы могли бы подумать, что он добавляет что-то после данного элемента, в то время как он фактически добавляет это к элементу.




6
$("#content ul").append('<li><a href="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');

Вот некоторые отзывы относительно читабельности кода (бесстыдный плагин для блога). http://coderob.wordpress.com/2012/02/02/code-readability

Попробуйте отделить объявление ваших новых элементов от действия добавления их в ваш UL. Это будет выглядеть примерно так:

var tabSpan = $('<span/>', {
    html: 'Message Center'
});
var messageCenterAnchor = $('<a/>', {
    href='/user/messages',
    html: tabSpan
});
var newListItem = $('<li/>', {
    html: messageCenterAnchor,
    "id": "myIDGoesHere"
});    // NOTE: you have to put quotes around "id" for IE..

$("content ul").append(newListItem);

Удачного кодирования :)


var newListItem = $ ('<li />', {html: messageCenterAnchor}); Как мне получить li и id?
Jmogera

@jmogera, вы пытаетесь установить идентификатор? Если это так, вы можете просто сделать это внутри {}. Я обновил код выше :)
undeniablyrob

3

Это самый короткий способ сделать это

list.push($('<li>', {text: blocks[i] }));
$('ul').append(list);

Где блоки в массиве. и вам нужно перебрать массив.



Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.