Справочник API
.append() в jQuery
Содержание статьи
-
Категории: Manipulation › DOM Insertion, Inside
Добавляет или перемещает содержимое, определяемое во входном параметре, в конец содержимого каждого элемента набора jQuery.
Синтаксис и описание:
Добавлено в jQuery 1.0.append( source )
Добавлено в jQuery 1.4.append( function( [index, html] ) )
Метод .append() вставляет (добавляет) фрагмент HTML разметки или созданные на лету элементы, либо перемещает все существующие DOM-элементы, определяемые с помощью параметра source, в конец существующего содержимого всех элементов в наборе jQuery (после всех его дочерних элементов). Не путать с функцией jQuery .appendTo().
Возвращаемое значение: (объект) Набор jQuery.
Параметры:
source – (строка | элемент | объект jQuery ) Строка с кодом разметки HTML, либо ссылка на существующий или созданный на лету DOM-элемент, либо набор jQuery.
function( [index, html] ) – (функция) Возвращает HTML строку, которая предназначена для вставки в конце существующего содержимого каждого элемента в наборе jQuery перед закрывающим тегом. В качестве входных параметров получает index (индекс, номер текущего элемента в наборе jQuery начиная с 0) и html (старое содержимое текущего элемента).
-
Примечание:
До версии jQuery 1.3, если в качестве места назначения определены не один, а несколько элементов, то все существующие исходные элементы не перемещаются, а копируются и вставляются в конец каждого принимающего элемента, сами оставаясь при этом в своем прежнем местоположении.
-
Примечание:
Перемещаемое (вставляемое) функцией .append() содержимое становится последним дочерним элементом, каждого элемента набора jQuery. Для вставки в качестве первого дочернего элемента необходимо использовать jQuery функцию .prepend().
Примеры:
-
<h2>Функция jQuery <b>append</b></h2> <div class="container"> <div class="inner">Вставить внутри элемента</div> <div class="inner">Переместить внутрь элемента</div> </div> // Создадим на лету параграф <p>, добавим его в конец содержимого // всех элементов с классом 'inner' и переместим заголовок <h2>, // вставив его после всех дочерних элементов блока с классом 'container'. <script type="text/javascript"> $('.inner').append('<p>***</p>'); $('.container').append($('h2')); </script>Результат:
<div class="container"> <div class="inner"> Вставить внутри элемента <p>***</p> </div> <div class="inner"> Переместить внутрь элемента <p>***</p> </div> <h2>Функция jQuery <b>append</b></h2> </div> -
// В конец содержимого каждого элемента <p> // поместить сгенерированный текстовый узел "jQuery". <p>JavaScript библиотека </p> <script type="text/javascript"> $("p").append(document.createTextNode("jQuery")); </script>Результат:
<p>JavaScript библиотека jQuery</p> -
// В конце каждого пункта списка вставить его порядковый номер <ul> <li>Элемент</li> <li>Элемент</li> <li>Элемент</li> </ul> <script type="text/javascript"> $("li").append(function(i){ return " №" + i; }); </script>Результат:
<ul> <li>Элемент №0</li> <li>Элемент №1</li> <li>Элемент №2</li> </ul>