Методы append() и prepend()

Добавлять что-то новое к уже существующим элементам очень просто с jQuery. Здаеь есть методы для добавление в конец (append) и в начало (prepend), используя HTML как текст, элементы DOM и объекты jQuery в качестве параметров. В следующем примере вы увидите как легко вставить новые элементы в список, используя оба метода append() и prepend():

<a href="javascript:void(0);" onclick="$('#olTestList1').append('<li>Appended item</li>');">Append</a>   
<a href="javascript:void(0);" onclick="$('#olTestList1').prepend('<li>Prepended item</li>');">Prepend</a>

<ol id="olTestList1">
	<li>Existing item</li>
	<li>Existing item</li>
</ol>

У нас есть две ссылки: первая будет добавлена в качестве пункта в список через append, т.е. новый пункт станет последним. Другая ссылка через prepend будет добавлена как первый элемент списка. В этом примере мы вставляем просто кусочек HTML, но мы могли бы сгенерировать новые пункты также через jQuery, или создать их в обычном JavaScript коде как элементы DOM. Фактически, оба метода append() и prepend() могут принимать бесконечное число новых элементов в качестве параметров. В следующем примере мы продемонстрируем это, а также возможность добавлять элементы в различных формах:

<a href="javascript:void(0);" onclick="AppendItemsToList();">Append items</a>   
<ol id="olTestList2"></ol>

<script type="text/javascript">
function AppendItemsToList()
{
	var item1 = $("<li></li>").text("Item 1");
	var item2 = "<li>Item 2</li>";
	var item3 = document.createElement("li");
	item3.innerHTML = "Item 3";
	
	$("#olTestList2").append(item1, item2, item3);
}
</script>

Как вы можете видеть, item1 сгенерирован через jQuery, item2 - это просто HTML-текст, а item3 - элемент DOM, созданный через JavaScript. Они все добавляются в список одним-единственным вызовом append(), и, разумеется, это сработало бы и с prepend().

Существуют вариации методов append() и prepend(), которые называются, соответственно, appendTo() и prependTo(). Они делают почти тоже самое, но другим способом - вместо того, чтобы вызывать их для элементов, куда вы хотите добавить новые элементы, а сами новые элементы передавать в качестве параметров, здесь нужно делать ровно наоборот. Что использовать - зависит от ситуации, но вот пример, который демонстрирует применение обоих методов:

<a href="javascript:void(0);" onclick="PrependItemsToList();">Prepend items</a>   
<ol id="olTestList3"></ol>

<script type="text/javascript">
function PrependItemsToList()
{	
	$("#olTestList3").prepend($("<li></li>").text("prepend() item"));
	$("<li></li>").text("prependTo() item").prependTo("#olTestList3");
}
</script>

В этом примере мы добавляем пункты в начало списка, но, конечно, все то же самое можно сделать и с append() и appendTo(). Как вы можете видеть, результат одинаков - только порядок записи меняется.