web-dev-qa-db-ja.com

既存の<ul>に<li>を追加する方法

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

<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 inside 最後のli（終了タグの直前）を追加します。このliを追加する最良の方法は何ですか？

jqueryjquery-append
526
Eileen

これはそれをするでしょう：

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

2つのこと

  • <li>を<ul>自体に追加するだけです。
  • HTMLで使用しているものとは反対の種類の引用符を使用する必要があります。そのため、属性に二重引用符を使用しているので、コードを一重引用符で囲みます。
778
Paolo Bergantino

あなたはそれをもっと 'オブジェクト的なやり方'でやはり読みやすくすることもできます。

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

あなたはそのとき引用符と戦う必要はありませんが、中括弧の痕跡を残しておく必要があります:)

506
Danubian Sailor

"append"の代わりに "after"を使うのはどうでしょうか。

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

".after（）"は、マッチした要素の集合の各要素の後に、パラメータで指定された内容を挿入することができます。

51
satomacoto

そのliに単純にテキストを追加するのであれば、次のものを使用できます。

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

この場合、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>
19
Ole Haugset

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

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

append（） 関数はjQueryではおそらく add（） と呼ばれるべきでした。あなたはそれが与えられた要素の後に何かを追加すると思うでしょうが、それは実際に を それを要素に追加します。

14
Philippe Leybaert

の代わりに

$("#header ul li:last")

やってみる

$("#header ul")
7
Adrian Godong
$("#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);

ハッピーコーディング:)

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

これがあなたができる最短の方法です

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

配列内のブロックの場所。そして、あなたは配列をループする必要があります。

3
user3516328

簡単 

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

これはもう一つです

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