JS - before, after, append, prepend

Poznajemy cztery ważne metody klasy Element, służące do wstawiania węzłów w różne miejsca danego elementu. Do dzieła.

Ok, rzućmy okiem na ten markup:

<ul id="people">
    People:
    <li>Jane Doe</li>
    <li>John Doe</li>
    <li>John the Last</li>
</ul>

Teraz go sobie okroimy:

<ul id="people">
    <li>Jane Doe</li>
    <li>John Doe</li>
</ul>

I spróbujemy odtworzyć używając metod append i prepend:

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

let textNode = document.createTextNode("People: ");
ul.prepend(textNode);

let li = document.createElement("li");
li.appendChild(document.createTextNode("John the Last"));

ul.append(li);

Wyjaśnijmy:

prepend umieszcza węzeł wewnątrz elementu przed jakąkolwiek treścią (jako first child)
append umieszcza węzeł na końcu wewnątrz elementu na końcu
appendChild to metoda klasy node, już ją poznaliśmy wcześniej, dodaje dziecko-węzeł do elementu, wykonana wielokrotnie dodaje zawsze na końcu, zaś chainowana dodaje kolejne dzieci rekurencyjnie
mieliśmy też insertBefore jako metodę klasy node, wywołujemy na węźle i podajemy co dodać oraz przed czym

W klasie element mamy jeszcze dwie metody, które mogą nam się przydać, before oraz after:

let heading = document.createElement("h1");
heading.textContent = "Header before element";
ul.before(heading);

let para = document.createElement("p");
para.textContent = "Para after element";
ul.after(para);

Teraz nasz markup wygląda tak:

<h1>Header before element</h1>
<ul id="people">
    People:
    <li>Jane Doe</li>
    <li>John Doe</li>
    <li>John the Last</li>
</ul>
<p>Para after element</p>

Przypomnijmy:

appendChild i insertBefore to metody klasy node
appendChild dodaje dziecko (element bądź inny węzeł) do elementu
appendChild chainowane dodaje dzieci rekurencyjnie
appendChild wywołane kilka razy będzie dodawać kolejne dzieci na końcu
insertBefore wywołujemy na node, na której pracujemy i przekazujemy jej node do dodania, oraz node, przed którą mamy dodać
appendChild i insertBefore są dostępne na elementach HTML, ponieważ każdy HTMLElement dziedziczy z node (i element i eventtarget)
append i prepend to metody klasy Element, podobnie before i after
append dodaje na końcu tego elementu
prepend dodaje na początku tego elementu
before dodaje przed tym elementem
after dodaje po tym elemencie

JS – before, after, append, prepend