jQuery метод .prepend()

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

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

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

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

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

jQuery синтаксис:

JavaScript
Синтаксис 1.0:

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

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

Синтаксис 1.4:

$( selector ).prepend( 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 ссылается на текущий элемент в наборе.

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

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

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

Пример использования jQuery метода .prepend(): попробуйте сами

index.html
HTML
<button>Клик</button><br /><br />
<p>Первый абзац</p>
<p>Второй абзац</p>
<ul>
  <li>Список</li>
</ul>
main.js
JavaScript
$(document).ready(function () {
  $("button").click(function () {
    $("p").prepend("<b>Hello </b>");
    $("ul").prepend("<li>Hello</li>");
  });
});

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

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

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

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

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

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

Использование jQuery метода .prepend() (несколько значений): попробуйте сами

index.html
HTML
<button>Клик</button><br /><br /><span>=)</span>
<p>Первый абзац</p>
<p>Второй абзац</p>
main.js
JavaScript
$(document).ready(function () {
  $("button").click(function () {
    var x = "<i>Hello </i>",
      y = " World",
      z = document.createTextNode("!! ");

    $("p:first").prepend(x, y, document.createTextNode("!! "));
    $("p:last").prepend(x, [y, z]);
    $("p").prepend($("span"));
  });
});

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

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

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

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Использование jQuery метода .prepend() (функция в качестве параметра)</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").prepend(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 метода .prepend() мы при нажатии на элемент <button> (кнопка) вызываем функцию, переданную в качестве параметра метода, которая вставляет в начало каждого элемента <p> маркированный список (элемент <ul>), элементы <li> которого, содержат информацию о индексе текущего элемента в наборе совпавших элементов и его содержимое.

Использование jQuery метода .prepend() (функция в качестве параметра): попробуйте сами

index.html
HTML
<button>Клик</button><br /><br />
<p>Первый абзац</p>
<p>Второй абзац</p>
main.js
JavaScript
$(document).ready(function () {
  $("button").click(function () {
    $("p").prepend(function (index, html) {
      return (
        "<ul><li>Индекс элемента: " + index + "</li><li>Старое содержимое: " + html + "</li></ul>"
      );
    });
  });
});

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

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