Добавление элементов

С jQuery очень просто добавлять новые элементы/контент.

Добавление нового HTML контента

Мы рассмотрим четыре jQuery метода, которые используются для добавления нового HTML контента:

  • append() - Вставляет контент в конец отобранных элементов
  • prepend() - Вставляет контент в начало отобранных элементов
  • after() - Вставляет контент после отобранных элементов
  • before() - Вставляет контент перед отобранными элементами

jQuery метод append()

jQuery метод append() вставляет контент В КОНЕЦ отобранных HTML элементов.


$("p").append("Присоединенный в конец текст.");

jQuery метод prepend()

jQuery метод prepend() вставляет контент В НАЧАЛО отобранных HTML элементов.


$("p").prepend("Присоединенный в начало текст.");

Добавление нескольких новых элементов при помощи append() и prepend()

В обоих предыдущих примерах мы всего лишь вставляли некий текст/HTML в начало/конец отобранных HTML элементов.

Тем не менее, и метод append(), и метод prepend() в качестве параметров могут принимать любое число новых элементов. Новые элементы могут генерироваться при помощи текста/HTML (как мы это делали в предыдущих примерах), либо при помощи jQuery, кода JavaScript или элементов DOM.

В следующем примере мы создаем несколько новых элементов. Элементы создаются при помощи текста/HTML, jQuery и JavaScript/DOM. Затем мы присоединяем новые элементы при помощи метода append() (это также работает и с методом prepend()):


function appendText() {
  var txt1 = "<p>Text.</p>";               // Создаем элемент при помощи HTML  
  var txt2 = $("<p></p>").text("Text.");   // Создаем элемент при помощи jQuery
  var txt3 = document.createElement("p");  // Создаем элемент при помощи DOM
  txt3.innerHTML = "Text.";
  $("body").append(txt1, txt2, txt3);      // Присоединяем новые элементы
}

jQuery методы after() и before()

jQuery метод after() вставляет контент ПОСЛЕ отобранных HTML элементов.

jQuery метод before() вставляет контент ПЕРЕД отобранными HTML элементами.


$("img").after("Текст после элемента");

$("img").before("Текст перед элементом");

Добавление нескольких новых элементов при помощи after() и before()

Также, оба метода, и after(), и before() могут принимать в качестве параметров любое число новых элементов. Новые элементы могут генерироваться при помощи текста/HTML (как мы это делали в предыдущих примерах), либо при помощи jQuery, кода JavaScript или элементов DOM.

В следующем примере мы создаем несколько новых элементов. Элементы создаются при помощи текста/HTML, jQuery и JavaScript/DOM. Затем мы присоединяем новые элементы при помощи метода after() (это также работает и с методом before()):


function afterText() {
  var txt1 = "<b>I </b>";                  // Создаем элемент при помощи HTML  
  var txt2 = $("<i></i>").text("love ");   // Создаем элемент при помощи jQuery
  var txt3 = document.createElement("b");  // Создаем элемент при помощи DOM
  txt3.innerHTML = "jQuery!";
  $("img").after(txt1, txt2, txt3);        // Вставим новые элементы после <img>
}