`insertAdjacentHTML / insertAdjacentElement` în JavaScript

Inserează HTML, un element sau text într-una din patru poziții față de element, fără să refacă restul conținutului.

Sintaxă

element.insertAdjacentHTML(pozitie, html)
element.insertAdjacentElement(pozitie, element)
element.insertAdjacentText(pozitie, text)

Ce face `insertAdjacentHTML / insertAdjacentElement`

Pozițiile sunt: "beforebegin" (înaintea elementului), "afterbegin" (la începutul conținutului), "beforeend" (la sfârșitul conținutului) și "afterend" (după element).

insertAdjacentHTML interpretează textul ca HTML, dar, spre deosebire de innerHTML +=, nu reconstruiește conținutul existent, deci ascultătorii de evenimente rămân. Ca la innerHTML, nu-i da texte venite de la utilizator. insertAdjacentElement inserează un element creat, iar insertAdjacentText un text simplu, sigur.

Parametri

Parametru	Descriere
`pozitie`	`"beforebegin"`, `"afterbegin"`, `"beforeend"` sau `"afterend"`.
`html / element / text`	Ce se inserează.

Ce returnează

insertAdjacentElement: elementul inserat (sau null); celelalte: undefined.

Exemple

Exemplul 1: Cele patru poziții

<ul id="lista"><li>existent</li></ul>

<script>
  const lista = document.getElementById("lista");
  lista.insertAdjacentHTML("beforebegin", "<h3>Titlu</h3>");
  lista.insertAdjacentHTML("afterbegin", "<li>primul</li>");
  lista.insertAdjacentHTML("beforeend", "<li>ultimul</li>");
  lista.insertAdjacentText("afterend", "<b>text, nu HTML</b>");
  console.log(lista.parentElement.innerHTML);
</script>

Rezultat în browser

<h3>Titlu</h3><ul id="lista"><li>primul</li><li>existent</li><li>ultimul</li></ul>&lt;b&gt;text, nu HTML&lt;/b&gt;

Exemplul 2: Un mesaj adăugat sub formular

const formular = document.querySelector("form");
const eroare = document.createElement("p");
eroare.className = "eroare";
eroare.textContent = "Completează adresa de email.";

console.log(formular.insertAdjacentElement("afterend", eroare) === eroare);