既存の番号なしリストにリストアイテムを追加するにはどうすればよいですか？

次のようなコードがあります。

<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ですか？

これはそれを行います：

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

2つのこと：

• あなただけ追加することができます<li>し<ul>、それ自体。
• HTMLで使用しているものとは逆のタイプの引用符を使用する必要があります。したがって、属性で二重引用符を使用しているため、コードを単一引用符で囲みます。

あなたはそれをより「オブジェクトの方法」で行うこともでき、それでも読みやすいです：

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

その場合、引用符で戦う必要はありませんが、中括弧のトレースを保持する必要があります:)

「追加」の代わりに「後」を使用するのはどうですか。

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

「.after（）」は、一致する要素のセットの各要素の後に、パラメーターで指定されたコンテンツを挿入できます。

にテキストを追加するだけの場合はli、次のように使用できます。

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

jQueryには、この場合のニーズを満たす次のオプションが付属しています。

appenddivセレクターで指定された親の末尾に要素を追加するために使用されます：

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

prependdivセレクタで指定された親の先頭/先頭に要素を追加するために使用されます：

$('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>

最後の要素ではなく、コンテナに追加する必要があります。

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

APPEND（）関数は、おそらくと呼ばれてきたはずですアドオン（） 、それは時々人々を混乱させるためのjQueryインチ 与えられた要素の後ろに何かを追加すると思いますが、実際にはそれを要素に追加します。

の代わりに

$("#header ul li:last")

試す

$("#header ul")

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

$("#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);

幸せなコーディング:)

これはあなたがそれを行うことができる最短の方法です

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

配列内のブロック。配列をループする必要があります。

これは別のものです

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

簡単

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