jQuery - Add Elements
С jQuery, легко добавлять новые элементы/содержание.
Добавление нового HTML-содержимого
Мы рассмотрим четыре метода jQuery, которые используются для добавления нового содержимого:
- Append ()-Вставка содержимого в конец выбранных элементов
- Начало ()-Вставка содержимого в начале выбранных элементов
- After ()-Вставка содержимого после выбранных элементов
- Before ()-вставляет содержимое перед выбранными элементами
jQuery append() Method
Метод jQuery Append () вставляет содержимое в конец выбранных элементов HTML.
Пример
$("p").append("Some appended text.");
jQuery prepend() Method
Метод jQuery () добавляет содержимое в начало выбранных элементов HTML.
Пример
$("p").prepend("Some prepended text.");
Добавление нескольких новых элементов с помощью Append () и добавления ()
В обоих примерах выше, мы только вставили некоторый текст/HTML в начале/конце выбранных элементов HTML.
Однако методы Append () и добавления () могут принимать бесконечное количество новых элементов в качестве параметров. Новые элементы могут быть сгенерированы с помощью Text/HTML (как мы делали в приведенных выше примерах), с jQuery, или с JavaScript-кодом и DOM-элементами.
В следующем примере мы создадим несколько новых элементов. Элементы создаются с текстом/HTML, jQuery и JavaScript/DOM. Затем мы добавляем новые элементы к тексту с помощью метода Append () (это работало бы и для префикса ()):
Пример
function appendText()
{
var txt1 = "<p>Text.</p>";
// Create element with HTML
var txt2 = $("<p></p>").text("Text."); // Create with jQuery
var txt3 = document.createElement("p"); // Create with DOM
txt3.innerHTML = "Text.";
$("body").append(txt1, txt2, txt3); // Append the new elements
}
jQuery после () и Before () методы
Метод jQuery After () вставляет содержимое после выбранных элементов HTML.
Метод jQuery Before () вставляет содержимое перед выбранными элементами HTML.
Пример
$("img").after("Some text after");
$("img").before("Some text before");
Добавить несколько новых элементов с помощью After () и Before ()
Кроме того, методы After () и Before () могут принимать бесконечное количество новых элементов в качестве параметров. Новые элементы могут быть сгенерированы с помощью Text/HTML (как мы делали в приведенном выше примере), с jQuery, или с JavaScript-кодом и DOM-элементами.
В следующем примере мы создадим несколько новых элементов. Элементы создаются с текстом/HTML, jQuery и JavaScript/DOM. Затем вставляем новые элементы в текст с помощью метода After () (это работало бы и раньше ()):
Пример
function afterText()
{
var txt1 = "<b>I </b>";
// Create element with HTML
var txt2 = $("<i></i>").text("love "); // Create with jQuery
var txt3 = document.createElement("b"); // Create with DOM
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3);
// Insert new elements after <img>
}
HTML-справочник jQuery
Для полного обзора всех jQuery HTML методы, пожалуйста, перейдите на наш jQuery HTML/CSS справочник.
