566

私は次のようなコードを持っています：

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

4

14 に答える 14

843

これはそれを行います：

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

2つのこと：

  • <li>をそれ自体に追加するだけ<ul>です。
  • HTML で使用しているものとは反対の種類の引用符を使用する必要があります。したがって、属性で二重引用符を使用しているため、コードを一重引用符で囲みます。
于 2009-07-17T19:29:55.310 に答える
523

より「オブジェクト」で読みやすい方法で行うこともできます。

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

その場合、引用符で戦う必要はありませんが、中括弧の痕跡を残す必要があります:)

于 2011-11-09T09:33:25.310 に答える
53

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

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

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

于 2012-01-18T07:06:41.657 に答える
30

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>
于 2014-09-30T12:58:02.220 に答える
18

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

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

append()関数は、時々人々を混乱させるため、jQuery ではおそらくadd()と呼ばれるべきでした。実際には要素に追加されますが、指定された要素の後に何かを追加すると思うでしょう。

于 2009-07-17T19:30:38.410 に答える
7 
$("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
于 2009-07-17T19:29:41.283 に答える
7

それ以外の

$("#header ul li:last")

試す

$("#header ul")
于 2009-07-17T19:32:21.450 に答える
7

使用する：

$("#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);
于 2012-02-02T17:32:16.590 に答える
5

使用する：

// Creating and adding an element to the page at the same time.
$("ul").append("<li>list item</li>");
于 2015-09-21T09:19:00.770 に答える
3

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

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

blocks配列はどこにありますか。そして、配列をループする必要があります。

于 2016-05-25T03:24:51.373 に答える
2

これは別のものです

$("#header ul li").last().html('<li> Menu 5 </li>');
于 2014-09-30T12:49:37.553 に答える