javascript - jqueryを使ってリストを作成する方法

Question

次のコードを実行します。

$('<div>').append('<ul>').append($('<li>').text('text'));

私はを頂きたい

<div>
 <ul>
    <li>text</li>
 </ul>
</div>

私のコードで何が間違っていますか?

Answer 1

追加関数の順序が間違っています...あなたは今、liをdivの内側ではなく、ulの隣に追加しています。

これはより良いでしょう：

var $myList = $('ul').append('<li>text</li>');
$('div').append($myList);

Answer 2

$('<div>').append('<ul>')返品div jQuery objectなど。関数チェーンと呼ばれるもののためのものです。通常、jQuery$(selector).method(...)で記述すると、セレクターで取得したオブジェクトが返されるため$(selector).method1(...).method2(...)、たとえば$(selector).css('color', '#555').text('hello')、要素に色を設定してからテキストを変更するなどの記述が可能です。

var div = $('<div>');
var ul = $('<ul>').appendTo(div);
var li = $('<li>').text('text').appendTo(ul);

まもなく:

$('<div>').append($('<ul>').append($('<li>').text('text')));

Answer 3

$('<div>').append($('<ul>').append($('<li>').text('text'))); 

Answer 4

divだけが必要で、への参照が必要ない場合、ULまたはLIこれは簡単で明確な方法です:

$('<div><ul><li>text</li></ul></div>');

Answer 5

左から右に開始するため、に追加ulしてから、divに追加liしますdiv。
これは、次の方法で修正できます。

var $ul = $('<ul>');
var $li = $('<li>').text('text');
$ul.append($li);
$('<div>').append($ul);

または1行で：$('<div>').append($('<ul>').append($('<li>').text('text')));

デモ

Answer 6

これを使うだけ

$("#Div_id").append('<ul>
                         <li>ListItem1</li>
                         <li>ListItem2</li>
                         <li>ListItem3</li>
                         <li>ListItem4</li>
                    </ul>');

このように、クリックイベントにこの追加を配置すると、クリックとして多くのリストを生成できます

Answer 7

私が見るように、誰もが仕事が欲しかったよりも最初に歩き回ろうとします..

これはあなたのhtmlです：

<div>
    <ul>
        <li>text</li>
    </ul>
</div>

そして、これはあなたが使うべきコードです

var MyString = "Write something here!"
$("someParent").append('<div> <ul> <li> ' + MyString + ' </li> </ul> </div>');

またはただする

$("someParent").append('<div> <ul> <li> Text </li> </ul> </div>');

複数のリスト項目を追加したい場合

かみそりの構文と MVC を使用:

var items = '@foreach(SelectListItem item in (System.Collections.IEnumerable)ViewData["MYItems"]){ <li> @item.Text </li> }';
$("someParent").append('<div> <ul>' + items + '</ul> </div>');

かみそりの構文なし:

var items = "<li> A </li>" + 
            "<li> B </li>" + 
            "<li> C </li>" + 
            "<li> D </li>" +  
            "<li> E </li>";
$("someParent").append('<div> <ul>' + items + '</ul> </div>');

やりたいことを選ぶだけで、いくつかの方法があります。