Добавление содержимого в конец элементов

<< Манипуляции
.append()  .appendTo()

Функции добавляют содержимое в конец элементов. Имеется два варианта их использования:

elements.append(content), content.appendTo(elements):jQuery1.0
в конец элементов elements будет добавлен content, который может быть задан html-текстом, объектом jQuery или DOM объектом. Различия функций заключается только в порядке следования содержимого и элементов, в которые это содержимое должно быть помещено.
.append(function(index, value)):jQuery1.4
в конец выбранных элементов будет добавлен html-текст, который будет возвращен пользовательской функцией. Функция вызывается, отдельно для каждого из выбранных элементов. При вызове ей передаются следующие параметры: index — позиция элемента в наборе, value — текущий html-содержимое элемента.

Примеры

Допустим страница содержит следующий текст: 

 <ul class="list l1">
   <li class="item"> Высоко </li>	
   <li class="item"> Быстро </li>	
   <li class="item"> Сильно </li>	
 </ul>
 <ul class="list l2">
   <li class="item"> Выше </li>	
   <li class="item"> Быстрее </li>	
   <li class="item"> Сильнее </li>	
 </ul>

следующие два выражения будут равнозначны 

 $(".list").append("<li class='item'>Тест</li>");
 
 $("<li class='item'>Тест</li>").appendTo($(".list"));

в обоих случаях элемент списка с текстом "Тест" будет добавлен в конец элементов с классом list. В результате, текст нашей страницы станет следующим: 

 <ul class="list l1">
   <li class="item"> Высоко </li>	
   <li class="item"> Быстро </li>	
   <li class="item"> Сильно </li>	
   <li class="item"> Тест </li>	
 </ul>
 <ul class="list l2">
   <li class="item"> Выше </li>	
   <li class="item"> Быстрее </li>	
   <li class="item"> Сильнее </li>	
   <li class="item"> Тест </li>	
 </ul>


Помимо html-текста, можно вставлять jQuery объекты. При этом, вставляемые элементы будут не скопированы, а перемещены. Например следующий код 

 $(".l2").append($(".l1 li:first"));

переместит элемент li из первого списка, в конец второго: 

 <ul class="list l1">
   <li class="item"> Быстро </li>	
   <li class="item"> Сильно </li>	
 </ul>
 <ul class="list l2">
   <li class="item"> Выше </li>	
   <li class="item"> Быстрее </li>	
   <li class="item"> Сильнее </li>	
   <li class="item"> Высоко </li>	
 </ul>


Рассмотрим пример с использованием пользовательской функции. Добавим новый элемент списка только в список, который содержит элемент со словом "Быстрее": 

 $(".list").append( function(indx, val){
   if($('<ul>'+val+'</ul>').find(".item:contains('Быстрее')").length != 0)
     return '<li class="item"> Новый элемент </li>';
   else
     return "";
 });

в итоге, текст первоначальной страницы станет следующим: 

 <ul class="list l1">
   <li class="item"> Высоко </li>	
   <li class="item"> Быстро </li>	
   <li class="item"> Сильно </li>	
 </ul>
 <ul class="list l2">
   <li class="item"> Выше </li>	
   <li class="item"> Быстрее </li>	
   <li class="item"> Сильнее </li>	
   <li class="item"> Новый элемент </li>	
 </ul>

См. также

Ссылки

Поисковые ключи:
  • поместить содержимое в конец элемента
  • вставить содержимое в конец элемента
  • добавить содержимое в конец элемента
  • .append()
  • append()
Поисковые ключи:
  • .appendTo()
  • appendTo()