JS - element insert adjacent

Poznajemy kolejne trzy metody klasy Element, które powinniśmy znać. Do dzieła.

Ok, element.insertAdjacentElement przyjmuje dwa argumenty, jeden to miejsce, gdzie ma wstawić, drugi to Element:

beforebegin, czyli przed tagiem, przed elementem
afterbegin, czyli wewnątrz tagu, na samym początku
beforeend, czyli wewnątrz tagu, przed końcem
afterend, czyli po tagu, na zewnątrz elementu

Można to tak zobrazować:

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

Ok, fajnie, zróbmy taki markup:

<ul id="list"></ul>

I teraz się pobawmy:

let ul = document.querySelector("#list");

let header = document.createElement("h1");
header.textContent = "Heading beforestart of ul";

let para = document.createElement("p");
para.textContent = "Para afterend of ul";

let textNode = document.createTextNode("Text afterbegin ul");

let li = document.createElement("li");
li.textContent = "Li beforeend ul";

ul.insertAdjacentElement('beforebegin', header);
ul.insertAdjacentElement("afterend", para);
ul.insertAdjacentElement("afterbegin", textNode); //fail
ul.insertAdjacentElement("beforeend", li);

No i mamy fail, bo jak nazwa metody wskazuje, ona jest do wstawianie elementów, nie węzłów. Ale mamy metodę insertAdjacentText:

let ul = document.querySelector("#list");

let header = document.createElement("h1");
header.textContent = "Heading beforestart of ul";

let para = document.createElement("p");
para.textContent = "Para afterend of ul";

let li = document.createElement("li");
li.textContent = "Li beforeend ul";

ul.insertAdjacentElement('beforebegin', header);
ul.insertAdjacentElement("afterend", para);
ul.insertAdjacentText("afterbegin", "Text afterbegin ul: "); //ok
ul.insertAdjacentElement("beforeend", li);

Tylko ta metoda wymaga przekazania tekstu, nie węzła tekstowego. Oczywiście możemy użyć metody insertBefore klasy node:

let ul = document.querySelector("#list");

let header = document.createElement("h1");
header.textContent = "Heading beforestart of ul";

let para = document.createElement("p");
para.textContent = "Para afterend of ul";

let textNode = document.createTextNode("Text before first child node ul: ");

let li = document.createElement("li");
li.textContent = "Li beforeend ul";

ul.insertAdjacentElement('beforebegin', header);
ul.insertAdjacentElement("afterend", para);
ul.insertBefore(textNode, ul.childNodes[0]);
ul.insertAdjacentElement("beforeend", li);

Też działa. To wszystko możemy zastąpić jeszcze inną metodą, mianowicie insertAdjacentHTML:

let ul = document.querySelector("#list");

ul.insertAdjacentHTML("beforebegin", `<h1>Header beforebegin ul</h1>`);
ul.insertAdjacentHTML("afterend", `<p>Para afterend ul</p>`);
ul.insertAdjacentHTML("afterbegin", `Text Node afterbegin:`);
ul.insertAdjacentHTML("beforeend", `<li>List item beforeend ul</li>`);

Aczkolwiek możemy nie chcieć takich metod z dwóch powodów:

Nie jest to szczególnie bezpieczne, choć mówimy tu o frontendzie, ale jednak
Skoro mamy do czynienia z tekstem, to odpadają wszystkie buildery, fasady, pozwalające krok po kroku budować elementy/węzły, edytować ich atrybuty i tak dalej, tekst to tekst

Tym sposobem znamy już niemal wszystkie (nie licząc takich, jak adoptNode czy importNode) sposoby wstawiania elementów/węzłów do drzewa DOM.

JS – element insert adjacent