Модифікація DOM в jQuery

Добавляння елементів та HTML

$(куди_добавляємо).fun(що_добавляємо);

$('p').before(s); - вставляє HTML-код чи елемент перед кожним вибраним елементом.

$('p').after(s); - вставляє HTML-код чи елемент після кожного вибраного елемента.

$('p').prepend(s); - вставляє HTML-код чи елемент всередину кожного вибраного елемента на початок.

$('p').append(s); - вставляє HTML-код чи елемент всередину кожного вибраного елемента в кінець.


				let $strong = $('strong:first');

				let img = document.createElement('img');

				img.setAttribute('src', 'https://68.media.tumblr.com/avatar_5295b088c685_128.png');


				$('p').before('<hr>');

				$('p').after(img);

				$('h2').prepend('<span class="danger">!!! >>> </span>');

				$('h2').append($strong);

Добавляння елементів та HTML до цільового елемента.

$(що_добавляємо).fun(куди_добавляємо);

$(e).insertBefore(target); - добавляє перед елементом.

$(e).insertAfter(target); - добавляє після елемента.

$(e).prependTo(target); - добавляє всередину на початок елемента.

$(e).appendTo(target); - добавляє всередину в кінець елемента.


				let tgt = $('h2');

				let $strong = $('strong:first');

				let img = document.createElement('img');

				img.setAttribute('src', 'https://68.media.tumblr.com/avatar_5295b088c685_128.png');


				$('<hr>').insertBefore(tgt);

				$(img).insertAfter(tgt);

				$('<span class="danger">!!! >>> </span>').prependTo(tgt);

				$($strong).appendTo('h2');

Створення та видалення елементів

$('<p class="hey">hello</p>') - створює елемент(и) у пам'ять.

$(e).clone(); - клонує елементи у пам'ять.


				$('#userpic').clone().prependTo('.comment');

				$('button.calc').clone(true);

				$('menu').clone(true, true);

$('ul').empty(); - видаляє всі дочірні елементи (очищає вибрані елементи).

$('li').remove(); - видаляє вибрані елементи.

$('li').detach(); - видаляє вибрані елементи.


				$('section').eq(0).empty();

				$('section').eq(1).html('');

				$('section').get(2).innerHTML = ''


				$('h2').eq(0).remove();


				let $li = $('ol li').each(function(i){

				  $(this).prepend('[' + i + '] ');

				}).filter(':even').detach();

				window.onclick = function(){

				  $('ol').eq(0).prepend($li);

				}

Всі три метода повертають видалені елементи, отже, їх можна зберегти у змінну і використати згодом.

Методи remove і detach можуть приймати аргумент - селектор, для фільтрації елементів, що будуть видалені.

Обгортки

$(e).wrap(html); - робить обгортку довкола кожного з вибраних елементів.

$(e).wrapAll(html); - робить одну спільну обгортку для всіх вибраних елементів.

$(e).wrapInner(html); - робить обгортку для контента кожного вибраного елемента (огортає всередині).

$(e).unwrap(); - видаляє обгортку (безпосереднього батька).


				$('h2').wrap('<div class="h2-wrap"></div>');

				$('.h2-wrap').css('border', '1px solid blue');

				$('h2').wrapInner('<span class="danger"></span>');

				$('li').wrapAll('ul');

				$('h1').unwrap('.resize');

Метод unwrap може приймати селектор, якщо батьківський елемент не відфільтрується ним, то обгортка не видалиться.