Добавление содержимого в конец элементов
.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>
См. также
- Добавление содержимого в начало элементов
- Добавление содержимого после заданных элементов
- Добавление содержимого перед заданными элементами