Page 117 - 6108

додає новий вузол newNode в кінець колекції дочірніх вузлів

insertBefore (newNode, referenceNode)
додає новий вузол newNode перед вузлом referenceNode

let parentElem = document.querySelector("#myId");
let elem = document.createElement("div"); // створюємо елемент
let elemText = document.createTextNode("Hello world!"); //
створюємо для нього текст
elem.appendChild(elemText); // вставляємо текст в елемент
elem.textContent = ("Hello world!"); //інший варіант вставки
тексту
parentElem.appendChild(elem); // вставляємо кінець колекції
дочірних вузлів parentElement
Якщо нам треба вставити новий вузол на друге, третє чи будь-яке інше
місце колекції дочірних елементів, то нам треба знайти вузол, перед яким треба
вставляти, за допомогою комбінацій властивостей firstChild / lastChild і
nextSibling / previousSibling.

let secondElem = parentElem.firstChild.nextSibling;
parentElem.insertBefore(elem, secondElem);// вставляємо в
едемент parentElement перед другим вузлом

Універсальні методи вставки
Метод ParentNode.append() вставляє набір об'єктів-вузлів або об'єктів
DOMString після останнього дочірного елементу ParentNode. Об'єкти
DOMString вставляються як еквівалентні текстові вузли.

// вставка елементу
let parent = document.createElement("div");
let p = document.createElement("p");
parent.append(p);

//вставка тексту
parent.append("Some text");

// вставка елементу і тексту
parent.append("Some text", p);

Метод ParentNode.prepend() вставляє набір об'єктів вузла або об'єктів
DOMString перед першою дитиною ParentNode. Об'єкти DOMString
вставляються як еквівалентні текстові вузли.

let parent = document.createElement("div");
parent.append("Some text");
parent.prepend("Headline: ");

Метод ChildNode.after() вставляє набір об'єктів вузлів або об'єктів
DOMString у список дітей батька ChildNode, одразу після ChildNode.
Об'єкти DOMString вставляються як еквівалентні текстові вузли.

let parent = document.createElement("div");
let child = document.createElement("p");
parent.appendChild(child);
var span = document.createElement("span");
child.after(span); // вставка елементу
child.after(span, "Text"); // вставка елементу і тексту