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

Одна из очень важных частей jQuery - это возможность манипулировать DOM.

jQuery предоставляет методы для добавления новых HTML-элементов в эффективный способ.

В этой главе мы объясним, как добавлять новые элементы/содержимое в DOM.

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

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

У нас есть следующие методы jQuery для добавления нового содержимого:

• append()

• prepend()

• after()

• before()

• wrap()

Ниже я покажу, как использовать каждый из этих методов.

jQuery метод append()

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

Ниже приведен пример добавления текстового содержимого ко всем параграфам:

$("button").click(function(){
　　$("p").append("Hello world");
});

Ниже приведен пример добавления HTML ко всем параграфам:

$("button").click(function(){
　　$("p").append("<b>Hello world</b>");
});

jQuery метод prepend()

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

Ниже приведен пример вставки текстового содержимого перед всеми параграфами:

$("button").click(function(){
　　$("p").prepend("Hello world");
});

Ниже приведен пример вставки HTML перед всеми параграфами:

$("button").click(function(){
　　$("p").prepend("<b>Hello world</b>");
});

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

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

Ноappend()иprepend()Методы могут принимать любое количество новых элементов в качестве параметров.

Новые элементы можно генерировать с использованием элементов HTML (например, в приведенном выше примере), элементов DOM или объектов jQuery.

В следующем примере мы используем элементы HTML, элементы DOM и объекты jQuery для создания нескольких новых элементов:

function appendText() {
　　let x = "<p>Пример текста.</p>"; // Создание элемента с помощью HTML　　
　　let y = $("<p></p>").text("Пример текста."); // Создание с помощью jQuery
　　let z = document.createElement("p"); // Создание с помощью DOM
　　z.innerHTML = "Пример текста.";
　　$("body").append(x, y, z); // Добавление новых элементов　
}

jQuery метод after()

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

Ниже приведен пример вставки содержимого после каждого параграфа:

$("button").click(function(){
　　$("p").after("<p>Hello world</p>");
});

jQuery метод before()

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

Ниже приведен пример вставки содержимого перед каждым параграфом:

$("button").click(function(){
　　$("p").before("<p>Hello world</p>");
});

Добавление нескольких элементов с помощью after() и before()

Аналогичноafter()иbefore()Методы могут принимать любое количество новых элементов в качестве параметров.

Новые элементы можно генерировать с использованием элементов HTML (например, в приведенном выше примере), элементов DOM или объектов jQuery.

В следующем примере мы используем элементы HTML, элементы DOM и объекты jQuery для создания нескольких новых элементов:

function afterText() {
　　let x = "<p>Пример текста.</p>"; // Создание элемента с помощью HTML　　
　　let y = $("<p></p>").text("Пример текста."); // Создание с помощью jQuery
　　let z = document.createElement("p"); // Создание с помощью DOM
　　z.innerHTML = "Пример текста.";
　$("h1").after(x, y, z); // Вставить новый элемент после <h1>
}

Метод wrap() jQuery

jQuery wrap()Метод包裹ает указанную структуру HTML перед каждым выбранным элементом и после каждого выбранного элемента.

Ниже приведен пример, который包裹 элемент DIV перед каждым элементом <p> и после каждого элемента <p>:

$("button").click(function(){
　　$("p").wrap("<div></div>");
});

Референтное руководство по HTML jQuery

Для получения полной информации о методах HTML, пожалуйста, посетите нашРеферентное руководство по HTML / CSS jQuery.