Question

运行以下代码：

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

我想

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

我的代码有什么问题？

Answer 1

追加函数的顺序是错误的......你现在将li附加到ul旁边的div上，而不是在它里面。

这会更好：

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')它为元素设置颜色，然后将文本更改为它。 / p>

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

或一行：$('<div>').append($('<ul>').append($('<li>').text('text')));

demo

Answer 6

正如我所看到的，每个人都试图四处走动而不是工作所需要的......

这是你的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>');

如果您想添加超过1个列表项而不是

使用razor语法和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>');

只有几种方法可以选择你想做的事情。

Answer 7

只需使用此

即可

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

就像这样，如果你将这个追加用于点击事件，你可以生成许多列表作为点击

如何使用jquery创建列表

7 个答案: