Как добавить элемент всегда как последний элемент, используя jquery?

Question

Я хочу, чтобы определенный элемент div был добавлен как последний элемент списка, несмотря ни на что. Есть ли способ, которым я могу явно указать это?

Answer 1

$('#list').append('<div></div>') добавит его в самый конец # списка

Если вы хотите добавить его к самому последнему div, на тот случай, если после этого появятся другие элементы, вы можете использовать $('#list div:last').after('<div></div>')

Answer 2

Получите родительский элемент списка и добавьте новый элемент к этому родительскому элементу в качестве последнего дочернего элемента.

Использование обычного JavaScript:

parent.appendChild(newElement);

Документация Mozilla: https://developer.mozilla.org/En/DOM/Node.appendChild

Если вы хотите добавить другие элементы, но этот элемент по-прежнему должен быть последним, вам придется добавить новые элементы перед этим последним элементом или удалить этот элемент, добавить новый элемент, а затем снова добавить этот элемент вконец.

Как только у вас уже есть последний элемент в списке, если вы хотите добавить новый элемент прямо перед этим последним элементом, вы можете сделать это следующим образом:

parent.insertBefore(newElement, parent.lastChild);

Answer 3

Если вы хотите в этом абсолютно убедиться, поместите пустой контейнер с идентификатором и замените содержимое внутри, если вам нужно обновить его, поэтому, если у вас есть большой контейнер, а затем вложенные контейнеры, последний дочерний элемент должен бытьвот так

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

Answer 4

Когда вы говорите о списке, я предполагаю, что вы имеете в виду неупорядоченные списки.

Вам понадобится что-то в этом роде:

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