jQuery метод .prependTo()

jQuery DOM методы

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

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

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

Еще одно отличие метода .prepend() от метода .prependTo() заключается в том, что метод .prepend() позволяет вставить сразу несколько элементов, передать в качестве параметра метода функцию, которая определяет какое содержимое будет вставлено в зависимости от индекса элемента, и при необходимости напрямую вставить текстовое содержимое.


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


jQuery синтаксис:

Синтаксис 1.0:

$( content ).prependTo( selector )

content - htmlString, или Element, или jQuery (объект) // не позволяет вставить текстовое содержимое напрямую
target - selector, или htmlString, или Element, или Array, или jQuery (объект)

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

1.0

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

ПараметрОписание
contentЭлемент DOM, HTML строка, или jQuery объект, которые будут вставлены в начало каждого выбранного элемента в наборе совпавших элементов. Если содержимое это существующий объект, то оно перемещается и вставляется из текущего положения в начало выбранного, или выбранных элементов.
targetОпределяет какому элементу, или элементам будет вставлено содержимое. Может содержать селектор, HTML строку, Элемент DOM, или jQuery объект.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования jQuery метода .prependTo()</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>
	    $( "<b>Hello </b>" ).prependTo( "p" ); //  вставляем содержимое в начало каждого целевого элемента <p>
	    $( "<li>Hello</li>" ).prependTo( "ul" ); //  вставляем содержимое в начало каждого целевого элемента <ul>
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button><br><br>
		<p>Первый абзац</p>
		<p>Второй абзац</p>
		<ul>
			<li>Список</li>
		</ul>
	</body>
</html>

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

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

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

В следующем примере мы рассмотрим нюансы синтаксиса метода .prependTo():

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .prependTo() (нюансы синтаксиса)</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 = "<span> Hello world </span>";//  создаем переменную

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

В этом примере с использованием jQuery метода .prependTo() мы при нажатии на элемент <button> (кнопка):

  1. С помощью JavaScript метода .createTextNode создаем текстовый узел и вставляем его в начало первого элемента <p> в документе. Обращаю Ваше внимание, что напрямую методом .prependTo() текстовое содержимое не добавить.
  2. Вставляем значение переменной x, которая содержит HTML строку в начало последнего элемента <p> в документе.
  3. Вставляем содержимое объекта jQuery в начало каждого целевого элемента <p>, при этом элемент <i> "вырезается" из первоначальной позиции.
  4. Вставляем HTML строку в начало целевых элементов <ol> (нумерованный список) и <ul> (маркированный список) в документе. Обратите внимание, что при указании нескольких целевых элементов, необходимо пречислять их внутри массива.

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

Использование jQuery метода .prependTo() (нюансы синтаксиса)
Использование jQuery метода .prependTo() (нюансы синтаксиса)
jQuery DOM методы