Маніпуляція з елементами jQuery. Частина 1

35

Від автора: вітаю вас, друзі. У цій статті ми почнемо знайомитися з методами, що дозволяють здійснювати маніпуляції з елементами DOM, а саме: додавання, видалення і зміна елементів DOM.

Для практичної роботи нам знадобиться кілька елементів верстки, наприклад такий:

Lorem ipsum dolor sit amet.

  • Item 1
  • Item 2
  • Item 3

Перші два методи, про які ми дізнаємося, будуть методи html, text. Перший, метод html, дозволяє отримати або змінити HTML-код вибраного елемента. Другий метод text, повертає або змінює текст вибраного елемента. Давайте поекспериментуємо з ними.

Наприклад, отримаємо весь html-код блоку content:

$(function(){
var content = $(‘.content’).html();
console.log(content);
});

Манипуляция с элементами в jQuery

Якщо ж передати в метод html параметром якийсь код HTML, тоді ми перепишемо HTML вибраного елемента. Наприклад, давайте три наявних елемента списку замінимо двома:

$(function(){
$(‘.content ul’).html(‘

  • Перший елемент списку
  • Другий елемент списку
  • ‘);
    });

    Манипуляция с элементами в jQuery

    За аналогічною схемою працює і метод text. Використовуючи його без параметра, ми отримаємо текстовий вміст елемента. Передаючи параметром рядок тексту, ми замінимо текст всередині елемента. Давайте отримаємо всі текстове вміст блоку content:

    $(function(){
    var text = $(‘.content’).text();
    console.log(text);
    });

    Манипуляция с элементами в jQuery

    А тепер спробуємо замінити текст в елементах списку:

    $(‘.content li a’).text(‘текст’);

    Манипуляция с элементами в jQuery

    Поки все просто. Методи html, text насправді використовуються досить нечасто при маніпуляції елементами, оскільки працюють досить глобально. Наприклад, використовуючи метод html досить складно додати в конкретний елемент дочірній елемент, не видаливши при цьому вже існуючі. Для цих цілей куди простіше використовувати інші методи jQuery для маніпуляції DOM, з якими ми познайомимося вже в наступних статтях.

    На цьому поточна стаття завершена. Більше про jQuerу ви можете дізнатися з наших уроків або курсу. Удачі!