|
|
Синтаксис и описание:
Добавлено в jQuery 1.0.append( source )
Добавлено в jQuery 1.4.append( function( [index, html] ) )
Метод .append() вставляет (добавляет) фрагмент HTML разметки или созданные на лету элементы, либо перемещает все существующие DOM-элементы, определяемые с помощью параметра source, в конец существующего содержимого всех элементов в наборе jQuery (после всех его дочерних элементов). Не путать с функцией jQuery .appendTo().
Параметры:
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>
[ наверх ]
|
|
