jQuery — добавить элементы
С jQuery легко добавлять новые элементы/контент.
Добавить новый HTML-контент
Мы рассмотрим четыре метода jQuery, которые используются для добавления нового контента:
append()- Вставляет содержимое в конец выбранных элементовprepend()- Вставляет содержимое в начало выбранных элементовafter()- Вставляет содержимое после выбранных элементовbefore()- Вставляет содержимое перед выбранными элементами
jQuery метод добавления ()
Метод jQuery append()вставляет содержимое В КОНЕЦ выбранных элементов HTML.
Пример
$("p").append("Some appended text.");
Метод jQuery prepend()
Метод jQuery prepend()вставляет содержимое В НАЧАЛО выбранных элементов HTML.
Пример
$("p").prepend("Some prepended text.");
Добавьте несколько новых элементов с помощью append() и prepend()
В обоих приведенных выше примерах мы вставили некоторый текст/HTML только в начале/конце выбранных элементов HTML.
Однако оба метода append()и prepend()могут принимать в качестве параметров бесконечное количество новых элементов. Новые элементы могут быть сгенерированы с помощью текста/HTML (как мы сделали в приведенных выше примерах), с помощью jQuery или с помощью кода JavaScript и элементов DOM.
В следующем примере мы создаем несколько новых элементов. Элементы создаются с помощью текста/HTML, jQuery и JavaScript/DOM. Затем мы добавляем новые элементы в текст с помощью append()метода (это тоже сработало бы
prepend()):
Пример
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 after() и before()
Метод jQuery after()вставляет содержимое ПОСЛЕ выбранных элементов HTML.
Метод jQuery before()вставляет содержимое ПЕРЕД выбранными элементами HTML.
Пример
$("img").after("Some text after");
$("img").before("Some text before");
Добавьте несколько новых элементов с помощью after() и before()
Кроме того, методы after()и before()могут принимать в качестве параметров бесконечное количество новых элементов. Новые элементы могут быть сгенерированы с помощью текста/HTML (как мы сделали в примере выше), с помощью jQuery или с помощью кода JavaScript и элементов DOM.
В следующем примере мы создаем несколько новых элементов. Элементы создаются с помощью текста/HTML, jQuery и JavaScript/DOM. Затем мы вставляем новые элементы в текст с помощью after()метода (это тоже сработало бы
before()):
Пример
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>
}
jQuery-упражнения
Справочник по jQuery HTML
Полный обзор всех HTML-методов jQuery см. в нашем справочнике по jQuery HTML/CSS .