jQuery метод .append()

jQuery DOM методы

Определение и применение

jQuery метод .append() позволяет вставить содержимое, указанное в параметре метода в конец каждого выбранного элемента в наборе совпавших элементов. Метод вставляет указанное содержимое как последний дочерний элемент.

Методы .append() и .appendTo() выполняют одну и ту же задачу, главное отличие этих методов заключается в синтаксисе, а именно, в размещении вставляемого контента и в указании цели, куда это содержимое вставляется. Синтаксис метода .append() предполагает использование выражения селектора перед методом, а метод .appendTo() наоборот содержимое, которое будет вставлено в конец каждого выбранного элемента в наборе совпавших элементов.

Кроме того, метод .append(), в отличии от метода .appendTo() позволяет вставить сразу несколько элементов, передать в качестве параметра метода функцию, которая определяет какое содержимое будет вставлено в зависимости от индекса элемента, и при необходимости напрямую вставить текстовое содержимое.


Обращаю Ваше внимание на то, что если необходимо вставить содержимое, указанное в параметре метода в начало каждого выбранного элемента в наборе совпавших элементов (первый дочерний элемент), то вы можете воспользоваться методом .prepend().


jQuery синтаксис:

Синтаксис 1.0:

$( selector ).append( content )
// при передаче нескольких элементов допускается перечисление через запятую,
либо вторым параметром в массиве
$( selector ).append( content, [content] ) 

content - htmlString, или Element, или Text, или Array, или jQuery (объект) 

Синтаксис 1.4:

$( selector ).append( function( index, html ) ) 

function - Function 
index - Integer
html - htmlString, или Element, или Text, или Array, или jQuery (объект) 

Добавлен в версии jQuery

1.0 (синтаксис расширен в версии 1.4)

Значения параметров

ПараметрОписание
contentОдин, или более дополнительных элементов DOM, текстовых узлов, массивы элементов и текстовых узлов, HTML строк, или jQuery объекты, которые будут вставлены в конец каждого выбранного элемента в наборе совпавших элементов.
function( index, html )Функция, которая возвращает один, или более дополнительных элементов DOM, текстовых узлов, массивы элементов и текстовых узлов, HTML строк, или jQuery объекты, которые будут вставлены в конец каждого выбранного элемента в наборе совпавших элементов. В качестве параметров функция принимает индекс элемента в наборе (index) и старое значение HTML элемента (html). Внутри функции this ссылается на текущий элемент в наборе.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования jQuery метода .append()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "button" ).click(function(){ // задаем функцию при нажатиии на элемент <button>
	    $( "p" ).append( "<b> Hello</b>" ); //  вставляем содержимое, указанное в параметре метода в конец каждого выбранного элемента <p>
	    $( "ul" ).append( "<li>Hello</li>" ); //  вставляем содержимое, указанное в параметре метода в конец каждого выбранного элемента <ul>
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button><br><br>
		<p>Первый абзац</p>
		<p>Второй абзац</p>
		<ul>
			<li>Список</li>
		</ul>
	</body>
</html>

В этом примере с использованием jQuery метода .append() мы при нажатии на элемент <button> (кнопка) вставляем содержимое, указанное в параметре метода в конец каждого выбранного элемента <p>, а также добавлем элемент списка <li> как последний дочерний элемент в маркированный список (элемент <ul>).

Результат нашего примера:

Пример использования jQuery метода .append() (добавление элемента)
Пример использования jQuery метода .append()

В следующем примере мы рассмотрим как передать методу .append() несколько значений:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .append() (несколько значений)</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "button" ).click(function(){ // задаем функцию при нажатиии на элемент <button>
	    //  создаем три переменные
	    var x = "<i> Hello</i>", 
	        y = " World",
	        z = document.createTextNode( "!! " ); //  метод создает текстовый узел	    

	    $( "p:first" ).append( x, y, document.createTextNode( "!! " ) ); //  вставляем содержимое, указанное в переменных в конец первого элемента <p>
	    $( "p:last" ).append( x, [y, z] ); //  вставляем содержимое, указанное в переменных в конец последнего элемента <p>
	    $( "p" ).append( $( "span" ) ); //  вставляем содержимое объекта jQuery в конец каждого элемента <p>
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button><br><br><span>=)</span>
		<p>Первый абзац</p>
		<p>Второй абзац</p>
	</body>
</html>

В этом примере с использованием jQuery метода .append() мы при нажатии на элемент <button> (кнопка) вставляем содержимое, заданное в трех переменных, в конец первого и последжнего элемента <p> в документе. Разница заключается только в синтаксисе, в первом случае использовано три параметра (элементы перечислены через запятую), а во втором два параметра, но при этом второй параметр содержит в себе массив элементов.

Кроме того, мы использовали метод .append(), которому в качестве параметра метода указали объект jQuery, что привело к выбору элемента <span> и вставке его в конец элементов <p>, при этом элемент "вырезается" из первоначальной позиции.

Результат нашего примера:

Использование jQuery метода .append() (несколько значений)
Использование jQuery метода .append() (несколько значений)

В следующем примере мы рассмотрим как передать функцию в качестве параметра метода .append():

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .append() (функция в качестве параметра)</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "button" ).click(function(){ // задаем функцию при нажатиии на элемент <button>
	    $( "p" ).append(function ( index, html ) { // передаем функцию в качестве параметра метода
	      return "<ul><li>Индекс элемента: " + index + "</li><li>Старое содержимое: " + html + "</li></ul>"; // добавляем список в конец элемента, который содержит информацию о индексе элемента в наборе и его содержимое
	    });
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button><br><br>
		<p>Первый абзац</p>
		<p>Второй абзац</p>
	</body>
</html>

В этом примере с использованием jQuery метода .append() мы при нажатии на элемент <button> (кнопка) вызываем функцию, переданную в качестве параметра метода, которая вставляет в конец каждого элемента <p> маркированный список (элемент <ul>), элементы <li> которого, содержат информацию о индексе текущего элемента в наборе совпавших элементов и его содержимое.

Результат нашего примера:

Использование jQuery метода .append() (функция в качестве параметра)
Использование jQuery метода .append() (функция в качестве параметра)
jQuery DOM методы