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.

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 ()

function afterText ()
var txt1 = "Я "; // Створюємо елемент з HTML
var txt2 = $ ( "") .text (" люблю "); // Створюємо з jQuery
var txt3 = document.createElement ( "big"); // Створюємо з DOM
txt3.innerHTML = "jQuery!";
$ ( "Img"). After (txt1, txt2, txt3); // Вставляємо нові елементи
>

Схожі статті