如何使用jQuery将元素始终添加为最后一个元素？

Question

我希望能够将某个 div 作为列表的最后一个元素添加，无论如何。有没有一种明确指定它的方法？

- user811433

Answer 1

$('#list').append('<div></div>') 将把它附加到 #list 的最后。

如果您想将其附加到最后一个 div，以防在其后有其他元素，则可以使用 $('#list div:last').after('<div></div>')

- rkw

Answer 2

获取列表的父级元素，将新项作为该父级元素的最后一个子元素添加进去。

使用纯javascript实现：

parent.appendChild(newElement);

Mozilla文档：https://developer.mozilla.org/En/DOM/Node.appendChild

如果你想要添加其他项并且仍然让这一项成为最后一项，那么你需要在此最后一项之前添加新的项或者删除这一项，附加你的新项，然后再将该项放回到末尾。

当你已经有了列表中的最后一个元素，并且想要在它之前添加一个新元素时，可以像这样操作：

parent.insertBefore(newElement, parent.lastChild);

- jfriend00

Answer 3

这对我来说有效。

$("#content div").last().append("<p>LAST ELEMENT!</p>");

- Elon Gomes Vieira

Answer 4

如果您想确保这一点，请使用具有ID的空容器，并在需要更新时替换其中的内容。因此，如果您有一个大容器和其中的子容器，则最后一个子容器应该像下面这样。 HTML

<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
    <div id="child3"></div>

    <div id="LastChild"></div>
</div>

现在，如果您需要更新，请使用jQuery。

var newcontent = '<p id="newcontent">I am the new content</p>';
//Build your content as html or plain text 

$('#LastChild').html(newcontent); //Replace old content in last child div with new

现在，如果你想保留最后一个子div的旧内容并在其下插入新内容，可以按照以下步骤进行操作。

var newcontent = $('#LastChild').html();
var newcontent += '<p id="newcontent">I am the new content</p>';

$('#LastChild').html(newcontent);

或者，如果您想保留最后一个子div中的旧内容，但希望新内容显示在旧内容之前或之上，您可以交换var newcontent的顺序，就像这样：

var newcontent = '<p id="newcontent">I am the new content</p>';
var newcontent += $('#LastChild').html();

$('#LastChild').html(newcontent);

- Tumharyyaaden

Answer 5

当你谈到列表时，我会假设你指的是无序列表。

你需要做类似这样的事情：

$('ul').append('<li>Bottom list-item</li>');

- Neelesh