Jak dodać istniejącą?

Mam kod, który wygląda tak:

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

Chciałbym użyć jQuery, aby dodać następujące elementy do listy:

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

Próbowałem tego:

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

Ale To dodaje nowy li wewnątrz ostatniego li (tuż przed zamykającym znacznikiem), nie po nim. Jaki jest najlepszy sposób na dodanie tego li?

Author: Rob, 2009-07-17

12 answers

To by wystarczyło:

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

Dwie rzeczy:

  • możesz po prostu dołączyć {[1] } do samego <ul>.
  • musisz użyć cudzysłowu przeciwnego niż to, czego używasz w HTML. Ponieważ używasz podwójnych cudzysłowów w swoich atrybutach, otocz kod pojedynczymi cudzysłowami.
 736
Author: Paolo Bergantino,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-02 21:36:54

Możesz to zrobić również w bardziej "obiektowy sposób" i nadal łatwy do odczytania:

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

Nie musisz wtedy walczyć z cudzysłowami, ale musisz zachować ślady szelek:)

 493
Author: Danubian Sailor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-11-09 09:33:25

Może użyjesz "after" zamiast "append".

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

".after () " może wstawić zawartość określoną przez parametr po każdym elemencie w zestawie dopasowanych elementów.

 49
Author: satomacoto,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-18 07:06:41

Jeśli po prostu dodajesz tekst w li, możesz użyć:

 $("#ul").append($("<li>").text("Some Text."));
 41
Author: kravits88,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-25 16:59:53

JQuery oferuje następujące opcje, które mogą spełnić twoje potrzeby w tym przypadku:

append jest używany do dodania elementu na końcu rodzica div określonego w selektorze:

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

prepend jest używany do dodania elementu na górze / początku rodzica div określonego w selektorze:

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

insertAfter pozwala wstawić element zaznaczenia następny po elemencie, który określisz. Utworzony element zostanie następnie umieszczony w DOM po określonym selektorze zamykanie tagów:

$('<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 zrobi przeciwieństwo powyższego:

$('<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>
 18
Author: Ole Haugset,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-17 14:15:00

Należy dodać do kontenera, a nie ostatni element:

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

Append () funkcja powinna być prawdopodobnie wywołana add () w jQuery, ponieważ czasami myli ludzi. Można by pomyśleć, że dodaje coś po podanym elemencie, podczas gdy w rzeczywistości dodaje to do elementu.

 14
Author: Philippe Leybaert,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-21 20:51:04

Zamiast

$("#header ul li:last")

Try

$("#header ul")
 7
Author: Adrian Godong,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-07-17 19:32:21
$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
 6
Author: Evan Meagher,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-07-17 19:31:29
$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');

Oto kilka uwag dotyczących czytelności kodu (bezwstydna wtyczka dla bloga). http://coderob.wordpress.com/2012/02/02/code-readability

Rozważ oddzielenie deklaracji nowych elementów od akcji dodawania ich do UL.. Wyglądałoby to mniej więcej tak:

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);

Happy coding:)

 6
Author: coderob,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-05-08 18:41:17

This is another one

$("#header ul li").last().html('<li> Menu 5 </li>');
 2
Author: Mahendra Jella,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-30 12:49:37

Easy

// Creating and adding an element to the page at the same time.
$( "ul" ).append( "<li>list item</li>" );
 2
Author: Kaleem Ullah,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-21 09:19:00

To najkrótsza droga, jaką możesz to zrobić

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

Gdzie bloki w tablicy. i musisz przejść przez tablicę.

 2
Author: user3516328,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-25 03:24:51