Как работат метод after в js?

Предположим, что у нас есть узел childNode, который является одним из дочерних элементов узла parentNode. И мы хотим добавить новый узел newNode в список детей узла parentNode сразу после childNode для этого мы используем метод after. Т.е. метод after вставляет узел или узлы в список детей родительского узла childNode сразу после childNode.

Синтаксис

after(node1)
after(node1, node2)
after(node1, node2, /* … ,*/ nodeN)

Пример

const parentNode = document.createElement("div");
// parentNode должен быть вставлен в DOM-дерево
document.body.append(parentNode);

const childNode1 = document.createElement("p");
const childNode2 = document.createElement("div");

// добавляем childNode1 и childNode2 в список детей узла parentNode
parentNode.append(childNode1, childNode2);
console.log(parentNode.outerHTML)// "<div><p></p><div></div></div>"

const newNode = document.createElement("span");
// добавляем newNode в список детей parentNode сразу после childNode1
childNode1.after(newNode);
console.log(parentNode.outerHTML)// "<div><p></p><span></span><div></div></div>"