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

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

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

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

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

Метод append() в jQuery

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

Пример

$("p").append("Добавить текст");

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

Метод jQuery prepend()

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

Пример

$("p").prepend("Добавить текст в начало");

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

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

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

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

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

Пример

function appendText(){ var txt1="<p>Text-1.</p>"; //Создание текста с помощью HTML-тегов var txt2=$("<p></p>").text("Text-2."); //Создание текста с помощью jQuery var txt3=document.createElement("p"); txt3.innerHTML="Text-3."; //Создание текста с использованием DOM-текста с DOM $("body").append(txt1,txt2,txt3); //Добавление новых элементов }

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

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

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

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

Пример

$("img").after("Добавить текст после"); $("img").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); //Добавить текст после изображения }

Попробуйте сами »
Другие расширения