Jquery добавить в конец элемента – Метод .append() добавляет или перемещает содержимое, определяемое во входном параметре, в конец содержимого каждого элемента набора jQuery.

Содержание

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

Материал из JQuery

.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>
   <li> Высоко </li>	
   <li> Быстро </li>	
   <li> Сильно </li>	
 </ul>
 <ul>
   <li> Выше </li>	
   <li> Быстрее </li>	
   <li> Сильнее </li>	
 </ul>

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

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

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

 <ul>
   <li> Высоко </li>	
   <li> Быстро </li>	
   <li> Сильно </li>	
   <li> Тест </li>	
 </ul>
 <ul>
   <li> Выше </li>	
   <li> Быстрее </li>	
   <li> Сильнее </li>	
   <li> Тест </li>	
 </ul>


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

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

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

 <ul>
   <li> Быстро </li>	
   <li> Сильно </li>	
 </ul>
 <ul>
   <li> Выше </li>	
   <li> Быстрее </li>	
   <li> Сильнее </li>	
   <li> Высоко </li>	
 </ul>


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

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

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

 <ul>
   <li> Высоко </li>	
   <li> Быстро </li>	
   <li> Сильно </li>	
 </ul>
 <ul>
   <li> Выше </li>	
   <li> Быстрее </li>	
   <li> Сильнее </li>	
   <li> Новый элемент </li>	
 </ul>

См. также

Ссылки

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

Материал из JQuery

.after()  .insertAfter()

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

elements.after(content), content.insertAfter(elements):jQuery1.0

сразу после элементов elements будет добавлено содержимое content, который может быть задан html-текстом, объектом jQuery или DOM объектом. Различия функций заключается только в порядке следования содержимого и элементов, после которых это содержимое должно быть вставлено.

после выбранных элементов будет добавлен html-текст, который будет возвращен пользовательской функцией. Функция вызывается отдельно, для каждого из выбранных элементов. При вызове ей передается один параметр: index — позиция элемента в наборе.

Примеры

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

 <ul>
   <li> Высоко </li>	
   <li> Быстро </li>	
   <li> Сильно </li>	
 </ul>
 <ul>
   <li> Выше </li>	
   <li> Быстрее </li>	
   <li> Сильнее </li>	
 </ul>

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

 $(".it1").after("<li>Тест</li>");
 
 $("<li>Тест</li>").insertAfter($(".it1"));

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

 <ul>
   <li> Высоко </li>	
   <li> Тест </li>
   <li> Быстро </li>	
   <li> Сильно </li>	
 </ul>
 <ul>
   <li> Выше </li>	
   <li> Тест </li>
   <li> Быстрее </li>	
   <li> Сильнее </li>	
 </ul>


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

 $(".l2 .it2").after($(".l1 li:last"));

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

 <ul>
   <li> Высоко </li>	
   <li> Быстро </li>	
 </ul>
 <ul>
   <li> Выше </li>	
   <li> Быстрее </li>	
   <li> Сильно </li>	
   <li> Сильнее </li>	
 </ul>


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

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

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

 <ul>
   <li> Высоко </li>	
   <li> Быстро </li>
   <li> Незванный элемент О_О </li>
   <li> Сильно </li>	
 </ul>
 <ul>
   <li> Выше </li>	
   <li> Быстрее </li>	
   <li> Сильнее </li>	
 </ul>

См. также

Ссылки

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

Материал из JQuery

.before()  .insertBefore()

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

elements.before(content), content.insertBefore(elements):jQuery1.0

перед элементами elements будет помещено содержимое content, которое может быть задано html-текстом, объектом jQuery или DOM объектом. Различия функций заключается только в порядке следования содержимого и элементов, перед которыми это содержимое должно быть помещено.

перед выбранными элементами будет добавлен html-текст, который будет возвращен пользовательской функцией. Функция вызывается отдельно, для каждого из выбранных элементов. При вызове ей передается один параметр: index — позиция элемента в наборе.

Примеры

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

 <ul>
   <li> Высоко </li>	
   <li> Быстро </li>	
   <li> Сильно </li>	
 </ul>
 <ul>
   <li> Выше </li>	
   <li> Быстрее </li>	
   <li> Сильнее </li>	
 </ul>

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

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

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

 <ul>
   <li> Высоко </li>	
   <li> Тест </li>
   <li> Быстро </li>	
   <li> Сильно </li>	
 </ul>
 <ul>
   <li> Выше </li>	
   <li> Тест </li>
   <li> Быстрее </li>	
   <li> Сильнее </li>	
 </ul>


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

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

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

 <ul>
   <li> Высоко </li>	
   <li> Быстро </li>	
 </ul>
 <ul>
   <li> Выше </li>	
   <li> Быстрее </li>	
   <li> Сильно </li>	
   <li> Сильнее </li>	
 </ul>


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

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

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

 <ul>
   <li> Высоко </li>	
   <li> Незванный элемент О_О </li>
   <li> Быстро </li>
   <li> Сильно </li>	
 </ul>
 <ul>
   <li> Выше </li>	
   <li> Быстрее </li>	
   <li> Сильнее </li>	
 </ul>

См. также

Ссылки

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

Материал из JQuery

.prepend()  .prependTo()

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

elements.prepend(content), content.prependTo(elements):jQuery1.0

в начало элементов elements будет добавлен content, который может быть задан html-текстом, объектом jQuery или DOM объектом. Различия функций заключается только в порядке следования содержимого и элементов, в которые это содержимое должно быть помещено.

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

Примеры

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

 <ul>
   <li> Высоко </li>	
   <li> Быстро </li>	
   <li> Сильно </li>	
 </ul>
 <ul>
   <li> Выше </li>	
   <li> Быстрее </li>	
   <li> Сильнее </li>	
 </ul>

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

 $(".list").prepend("<li> Тест </li>");
 
 $("<li> Тест </li>").prependTo($(".list"));

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

 <ul>
   <li> Тест </li>
   <li> Высоко </li>	
   <li> Быстро </li>	
   <li> Сильно </li>	
 </ul>
 <ul>
   <li> Тест </li>
   <li> Выше </li>	
   <li> Быстрее </li>	
   <li> Сильнее </li>	
 </ul>


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

 $(".l2").prepend($(".l1 li:last"));

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

 <ul>
   <li> Высоко </li>	
   <li> Быстро </li>	
 </ul>
 <ul>
   <li> Сильно </li>	
   <li> Выше </li>	
   <li> Быстрее </li>	
   <li> Сильнее </li>	
 </ul>


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

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

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

 <ul>
   <li> Высоко </li>	
   <li> Быстро </li>	
   <li> Сильно </li>	
 </ul>
 <ul>
   <li> Новый элемент </li>	
   <li> Выше </li>	
   <li> Быстрее </li>	
   <li> Сильнее </li>	
 </ul>

См. также

Ссылки

Отправить ответ

avatar
  Подписаться  
Уведомление о