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

<< Манипуляции
.before()  .insertBefore()

Функции помещает заданное содержимое перед определенными элементами страницы. Имеется два варианта использования функций:

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

Примеры

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

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

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

 $(".it2").before("<li class='item'>Тест</li>");
 
 $("<li class='item'>Тест</li>").insertBefore($(".it2"));

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

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


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

 $(".l2 .it3").before($(".l1 li:last"));

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

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


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

  $('.item').before(function(indx){
    if($(this).text() == " Быстро ")
    	return '<li class="item"> Незванный элемент О_О </li>';
    else
    	return '';
  });

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

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

См. также

Ссылки

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