jQuery добавление элементов

С помощью jQuery легко добавлять новые элементы/содержимое.

Добавление нового HTML-содержимого

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

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

Метод append() jQuery

Метод append() jQuery вставляет содержимое в конце выбранного элемента.

Пример

$("p").append("Some appended text.");

Попробуйте сами

Метод prepend() jQuery

Метод prepend() jQuery вставляет содержимое в начале выбранного элемента.

Пример

$("p").prepend("Some prepended text.");

Попробуйте сами

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

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

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

В следующем примере мы создаем несколько новых элементов.Эти элементы можно создать с помощью text/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.";
$("p").append(txt1,txt2,txt3);         // Добавление новых элементов в конец
{}

Попробуйте сами

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

Метод after() jQuery вставляет содержимое после выбранного элемента.

Метод before() jQuery вставляет содержимое перед выбранным элементом.

Пример

$("img").after("Some text after");
$("img").before("Some text before");

Попробуйте сами

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

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

В следующем примере мы создаем несколько новых элементов.Эти элементы могут быть созданы с помощью text/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("big");  // Создание нового элемента через DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // Вставка новых элементов после img
{}

Попробуйте сами

Справочник jQuery HTML

Для получения полной информации о методах jQuery HTML, пожалуйста, обратитесь к следующей справочной книге: