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

С 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="<p>Тест.</p>         // Создаем элемент с HTML 
var txt2=$("<p></p>").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="<b>Я </b>";            // Создаем элемент с HTML 
var txt2=$("<i></i>").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', ); ?>
Написать

(обязательно)

(обязательно)

Это не спам (обязательно)