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

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

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

Ответ 1

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

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

Две вещи:

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

Ответ 2

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

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

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

Ответ 3

Как использовать "после" вместо "добавить".

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

". after()" может вставлять содержимое, заданное параметром, после каждого элемента в наборе согласованных элементов.

Ответ 4

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

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

Ответ 5

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>

Ответ 6

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

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

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

Ответ 7

Вместо

$("#header ul li:last")

попробовать

$("#header ul")

Ответ 8

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

Ответ 9

$("#content ul").append('<li><a href="/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);

Счастливое кодирование:)

Ответ 10

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

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

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

Ответ 11

Это еще один

$("#header ul li").last().html('<li> Menu 5 </li>');

Ответ 12

Легко

// Creating and adding an element to the page at the same time.
$( "ul" ).append( "<li>list item</li>" );