Добавление содержимого в конец элементов — 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>
$(".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>