jQuery - Добавление Элементов

Рубрика: jQuery и HTML

С jQuery легко добавить новые элементы/контент. Рассмотрим несколько методов, которые позволяют это сделать.

Добавьте Новый Контент HTML

Мы рассмотрим четыре jQuery метода, которые используются, чтобы добавить новый контент:

append() - Вставляет содержимое в конец выбранных элементов
prepend() - Вставляет содержимое в начало выбранных элементов
after() - Вставляет содержимое после выбранных элементов
before() - Вставляет содержимое перед выбранными элементами

jQuery Метод append()

jQuery метод append() вставляет контент В КОНЕЦ выбранных элементов HTML.

Пример

$("p").append("Некоторый добавляемый текст.");

Попробуйте сами »

jQuery Метод prepend()

jQuery метод prepend() вставляет контент В НАЧАЛО выбранных элементов HTML.

Пример

$("p").prepend("Некоторый добавляемый текст.");

Попробуйте сами »

Добавьте Несколько Новых Элементов с Помощью append() и prepend()

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

Однако, оба метода append() и prepend() могут принимать бесконечное число новых элементов в качестве параметров. Новые элементы могут быть сгенерированы с текстом/HTML (как мы делали в примерах выше), с jQuery или с кодом JavaScript и элементами DOM.

В следующем примере мы создаем несколько новых элементов. Элементы создаются с текстом/HTML, jQuery и JavaScript/DOM. Затем мы добавляем новые элементы к тексту методом append() (это сработало бы и для prepend() также):

Пример

function appendText()
{
var txt1="Тест. // Создаем элемент с HTML
var txt2=$("").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").after("Некоторый текст после");

$("img").before("Некоторый текст до");

Попробуйте сами »

Добавьте Несколько Новых Элементов с Помощью after() и before()

Также, оба метода after() и before() могут принимать бесконечное число новых элементов как параметры. Новые элементы могут быть сгенерированы с текстом/HTML (как делали в примере выше), с jQuery или с кодом JavaScript и элементами DOM.

В следующем примере мы создаем несколько новых элементов. Элементы создаются с текстом/HTML, jQuery и JavaScript/DOM. Затем мы вставляем новые элементы в текст методом after() (это сработало бы с before() также):

Пример

function afterText()
{
var txt1="Я "; // Создаем элемент с HTML
var txt2=$("").text("люблю "); // Создаем с jQuery
var txt3=document.createElement("big"); // Создаем с DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // Вставляем новые элементы
}

Попробуйте сами »

Далее: Обход jQuery - Потомки

Смотрите также

Комментарии

AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.103 Safari/537.36', 'comment_type' => '', 'comment_parent' => '0', 'user_id' => '1', 'comment_dir' => '037', 'comment_numpp' => '566', ); ?>=> '1', 'comment_dir' => '037', 'comment_numpp' => '5354', ); ?>

Написать