43. Вставка, клонування, заміна, видалення

Вставка замість існуючого:
innerHTML - вставити код в середину блока замість існуючого там
textContent - вставити текст в середину блока замість існуючого там

Вставка до існуючого:
node.before(nodes or strings) – додає попередньо згенеровані вузли або рядки перед node
node.prepend(nodes or strings) – додає попередньо згенеровані вузли або рядки перед існуючим в node
node.append(nodes or strings) – попередньо згенеровані вузли або рядки в кінець node(вузла)
node.after(nodes or strings) – додає попередньо згенеровані вузли або рядки після node
insertAdjacentHTML - вставляе HTML-код в залежності від параметрів ('beforebegin', 'afterbegin', 'beforeend', 'afterend')

Створення та клонування вузлів:
document.createElement(node) - створює вузол
elem.cloneNode(true/false) - клонує вузол (якщо true, то разом з вмістом, якщо false, то тільки сам блок)

Видалення:
node.remove() - видаляє вузол

Заміна:
node.replaceWith(nodes or strings) - замiнює node заданими вузлами або рядками

Застарілі методи:
insertBefore - вставити елемент в блок перед тим, що там є
appendChild - додає новий елемент після існуючих там
parentElem.replaceChild(node, oldChild) - замінює oldChild на node серед дочірних елементів parentElem
parentElem.removeChild(node) - видаляє node з батьківського елементу parentElem

Приклади

innerHTML - вставити код в середину блока

Вставляємо блок в середину, існуючий там контент видаляється

#block1

btn1.onclick = function (){
          block1.innerHTML="новий";	
};

textContent - вставити текст в середину блока замість існуючого там

Вставка кода неможлива, теги замінюються на спецсимволи

#block2

btn2.onclick = function (){
          block2.textContent="новий текст";	
};

document.createElement(node) - створює вузол

Створюємо вузол і вставляємо його в елемент

#block3

btn_2.onclick = function (){
	var ce = document.createElement('div');
	// вставити вузол в блок після інших елементів
          block3.append(ce);	
};

elem.cloneNode(true/false) - клонує вузол, якщо true, то разом з вмістом, якщо false, то тільки сам блок

Клонуємо вузол разом зі span, що всередині і вставляємо його в елемент

<div class="fc"><span>.fc</span></div>

#block4

.fc

btn4.onclick = function (){
	// вибираємо блок
	let cv = document.querySelector('.fc');
	// отримуємо клон, якщо вказати false, то вміст блока не клонується
	let ncv = cv.cloneNode(true);
	// вставляємо клон після інших елементів
          block4.append(ncv);	
};

node.before(strings) – додає попередньо згенеровані вузли або рядки перед node
node.prepend(nodes or strings) – додає попередньо згенеровані вузли або рядки перед існуючим в node
node.append(nodes or strings) – додає попередньо згенеровані вузли або рядки в кінець node(вузла)
node.after(nodes or strings) – додає додає попередньо згенеровані вузли або рядки після node

Але вузли попередньо потрібно згенерувати, інакше вставляється не html-код, а його заміна у вигляді спеціальних символів

 ol.before('текст перед'); 
 

  let liFirst = document.createElement('li');
  liFirst.innerHTML = 'prepend';
  ol.prepend(liFirst); 

  let liLast = document.createElement('li');
  liLast.innerHTML = 'append';
  ol.append(liLast);
  
  // спецсимволи
  ol.after('<span>текст після</span>');

insertAdjacentHTML - вставляє HTML-код в залежності від параметрів

Перший параметр:

    "beforebegin" – вставить html-код безпосередньо  перед елементом
    "afterbegin" – вставить html-код в середину елементу на початок 
    "beforeend" – вставить html-код в середину елементу в самий кінець
    "afterend" – вставить html-код безпосередньо  перед елементом

Другий параметр - це HTML-код, який вставиться саме, як код

ol2.insertAdjacentHTML('beforebegin', 'beforebegin'); 
ol2.insertAdjacentHTML('afterbegin', 'afterbegin');
ol2.insertAdjacentHTML('beforeend', 'beforeend');
ol2.insertAdjacentHTML('afterend', 'afterend
');

node.remove() - видаляє вузол

Клікай

  in_block.onclick =function(){
	    this.remove();
}

node.replaceWith(nodes or strings) - замінює блок вузлом або текстом

Клікай

  block5.onclick =function(){
	   var new_d = document.createElement("div");
	   this.replaceWith(new_d);
}

⛔

Застарілі методи

insertBefore - вставити елемент в блок перед тим, що там є

#childElement

 btn2.onclick = function (){
	// створюємо новий <div>
var new_div = document.createElement("div");
// записуємо в нього текст
new_div.innerHTML = "new_div";
// отримуємо елемент, перед яким будемо вставляти div
var old_div = document.getElementById("childElement");

// отримуємо батьківський елемент
var parentDiv = old_div.parentNode;

// вставити в батьківський div
parentDiv.insertBefore(new_div, old_div);
}

appendChild - вставити елемент в блок після того, що там є

#childElement

 btn3.onclick = function (){
	// створюємо новий <div>
var new_div = document.createElement("div");
// записуємо в нього текст
new_div.innerHTML = "new_div";
// отримуємо елемент, перед яким будемо вставляти div
var old_div = document.getElementById("childElement1");

// отримуємо батьківський елемент
var parentDiv = old_div.parentNode;

// вставити в батьківський div
parentDiv.appendChild(new_div, old_div);
}

parentElem.replaceChild(node, oldChild) - замінює oldChild на node серед дочірних елементів parentElem

Маємо елементи:

 <ol id="ol3">
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ol>

// створюємо новий елемент
 let newLi = document.createElement('li');
 // записуємо в нього текст
  newLi.innerHTML = 'Заміна';
  // отримуємо набір існуючих (старих) елементів
  let oldChild = document.querySelectorAll('#ol3 li');
  // замінюємо старий елемент з індексом 1 на новий елемент
 ol3.replaceChild(newLi, oldChild[1]);

Результат:

parentElem.removeChild(node) - видаляє node з батьківського елементу parentElem

Маємо елементи:

 <ol id="ol4">
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ol>

Видаляємо перший:

let li = ol4.firstElementChild;
  ol4.removeChild(li);

далі ✏