Метод jQuery.append() можно использовать для упрощения сложных задач, таких как создание динамических списков, добавление элементов формы или загрузка дополнительного контента через AJAX. В этой статье вы узнаете синтаксис и использование метода.
Что такое метод jQuery.append()?
jQuery.append() — это функция из библиотеки jQuery, которая динамически вставляет контент в дерево DOM (объектная модель документа). Этот метод позволяет добавлять новые элементы или структуры в конец определенного объекта. Метод jQuery.append() имеет широкий спектр возможностей и может использоваться в сочетании с другими функциями jQuery, такими как jQuery.removeClass() или jQuery.on(). Это открывает множество возможностей для динамического расширения вашего дерева DOM. Особого внимания заслуживает бесшовная интеграция jQuery в WordPress, которая позволяет реализовать специальные функции и интерактивные элементы в вашей CMS.
Каков синтаксис и параметры метода jQuery.append()?
JQuery.append() принимает два параметра :
$(selector).append(content, function(index, html));
- content: представляет добавляемый контент
- function(index, html)**: вызывается после добавления содержимого
- index: индекс текущего элемента в наборе выбранных объектов
- html: текущее HTML-содержимое элемента.
Это selectorможет быть любой допустимый выбор CSS для идентификации желаемого целевого элемента. Селекторы в jQuery — это, например, идентификаторы ( #id), классы (.class) или имена элементов (например div).
Это contentможет быть строка символов (текст), HTML-код или существующий элемент DOM. Если вы передадите строку, она будет добавлена как текстовое содержимое элемента. Если вы используете HTML-код, он будет интерпретирован и вставлен как новая структура элемента. Если существует существующий элемент DOM,.append()он добавляется к целевому объекту.
Примеры использования jQuery.append()
Ниже мы покажем вам несколько примеров, иллюстрирующих использование метода.append() в jQuery.
jQuery.append
jQuery.append() HTML
В следующем примере показано добавление структур HTML :
$("header").append("<div><p>Neuer Inhalt</p></div>");
jQuery.append() divвставляет контейнер с абзацем в конце элемента заголовка.
jQuery.append() DOM elements
Элементы DOM добавляются таким же образом :
var newElement = $("<div><p>Neuer Inhalt</p></div>"); $("header").append(newElement);
jQuery.append() с функцией обратного вызова
Функция обратного вызова позволяет выполнять определенные действия после добавления контента или получать доступ к вновь созданному элементу или его свойствам.
$("div#container").append("<p>Erstes Element</p><p>Zweites Element</p><p>Drittes Element</p>", function(index, html) { console.log("Hinzugefügtes Element: " + html); console.log("Index des Elements: " + index); });
Результат:
Hinzugefügtes Element: <p>Erstes Element</p> Index des Elements: 0 Hinzugefügtes Element: <p>Zweites Element</p> Index des Elements: 1 Hinzugefügtes Element: <p>Drittes Element</p> Index des Elements: 2
В этом примере jQuery.append() добавляет три <p> тега («Первый элемент», «Второй элемент» и «Третий элемент») одновременно в конец элемента div с идентификатором container. Функция обратного вызова вызывается для каждого добавленного объекта и выводит на консоль HTML-содержимое соответствующего элемента и соответствующий индекс.
