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

31

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

Отже, візьмемо верстку з попередньої статті. Давайте попрацюємо зі списком. Наприклад, нам необхідно додати новий елемент на початок списку або в кінець, не чіпаючи при цьому інші елементи списку.

Для того, щоб додати новий елемент на початок обраного елемента, jQuery пропонує методи prepend і prependTo. Синтаксис їх гранично простий. Метод prepend приймає параметром контент, який ми хочемо вставити, а метод prependTo в якості параметра очікує елемент, в який ми додаємо контент. Різницю використання методів і суть їх роботи буде простіше зрозуміти на прикладі.

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

  • Новий елемент prepend
  • ‘);
    $(‘

  • Новий елемент prependTo
  • ‘).prependTo($(‘.content ul’));
    });

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

    Обидва методу відпрацюють абсолютно однаково — додадуть новий контент на початок обраного елемента. Фактично вони є синонімами і ви можете вибирати будь-який з них для рішення такої задачі. Хоча, на мій погляд, метод prepend більш зрозумілий у використанні, і я рекомендую вибрати його.

    Тепер подивимося, як вставити вміст елемента в кінець. У цьому нам допоможуть методи append і appendTo. Принцип їх роботи такий самий, як і методів prepend і prependTo, тобто вони є синонімами і виконують одну задачу. Приклад, який все пояснить:

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

  • Новий елемент append
  • ‘);
    $(‘

  • Новий елемент appendTo
  • ‘).appendTo($(‘.content ul’));
    });

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

    Як бачите, все просто. Додавати контент всередину елемента не складе праці. Тепер подивимося, як в jQuery можна додати контент перед або після елемента. Для того, щоб додати щось перед елементом, використовують методи before або insertBefore. А щоб додати контент після елемента слід використовувати методи after або insertAfter. Вони працюють за тим же принципом, що й попередні методи. Наприклад, додамо параграфи перед і після списку.

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

    Параграф before

    ‘);
    $(‘

    Параграф insertBefore

    ‘).insertBefore(‘.content ul’);
    $(‘.content ul’).after(‘

    Параграф after

    ‘);
    $(‘

    Параграф insertAfter

    ‘).insertAfter(‘.content ul’);
    });

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

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