jQuery - Добавление Элементов
С jQuery легко добавить новые элементы/контент. Рассмотрим несколько методов, которые позволяют это сделать.
Добавьте Новый Контент HTML
Мы рассмотрим четыре jQuery метода, которые используются, чтобы добавить новый контент:
- append() - Вставляет содержимое в конец выбранных элементов
- prepend() - Вставляет содержимое в начало выбранных элементов
- after() - Вставляет содержимое после выбранных элементов
- before() - Вставляет содержимое перед выбранными элементами
jQuery Метод append()
jQuery метод append() вставляет контент В КОНЕЦ выбранных элементов HTML.
jQuery Метод prepend()
jQuery метод prepend() вставляет контент В НАЧАЛО выбранных элементов HTML.
Добавьте Несколько Новых Элементов с Помощью append() и prepend()
В обоих примерах выше, мы только вставили некоторый текст/HTML в начало/конец выбранных элементов HTML.
Однако, оба метода append() и prepend() могут принимать бесконечное число новых элементов в качестве параметров. Новые элементы могут быть сгенерированы с текстом/HTML (как мы делали в примерах выше), с jQuery или с кодом JavaScript и элементами DOM.
В следующем примере мы создаем несколько новых элементов. Элементы создаются с текстом/HTML, jQuery и JavaScript/DOM. Затем мы добавляем новые элементы к тексту методом append() (это сработало бы и для prepend() также):
Пример
{
var txt1="<p>Тест.</p> // Создаем элемент с HTML
var txt2=$("<p></p>").text("Текст."); // Создаем с jQuery
var txt3=document.createElement("p"); // Создаем с DOM
txt3.innerHTML="Текст.";
$("p").append(txt1,txt2,txt3); // Добавляем новые элементы
}
Попробуйте сами »
jQuery Методы after() и before()
jQuery метод after() вставляет контент ПОСЛЕ выбранных элементов HTML.
jQuery метод before() вставляет контент ПЕРЕД выбранными элементами HTML.
Пример
$("img").before("Некоторый текст до");
Попробуйте сами »
Добавьте Несколько Новых Элементов с Помощью after() и before()
Также, оба метода after() и before() могут принимать бесконечное число новых элементов как параметры. Новые элементы могут быть сгенерированы с текстом/HTML (как делали в примере выше), с jQuery или с кодом JavaScript и элементами DOM.
В следующем примере мы создаем несколько новых элементов. Элементы создаются с текстом/HTML, jQuery и JavaScript/DOM. Затем мы вставляем новые элементы в текст методом after() (это сработало бы с before() также):
Пример
{
var txt1="<b>Я </b>"; // Создаем элемент с HTML
var txt2=$("<i></i>").text("люблю "); // Создаем с jQuery
var txt3=document.createElement("big"); // Создаем с DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // Вставляем новые элементы
}
Попробуйте сами »