dexblog.ro
JS Toate comenzile JavaScript

remove / replaceWith / replaceChildren în JavaScript

Pagina web (DOM) Browserele moderne (replaceChildren: din 2020)

Șterge un element din pagină, îl înlocuiește cu altele sau înlocuiește tot conținutul unui element.

Sintaxă 
element.remove()
element.replaceWith(nod1, ...)
parinte.replaceChildren(nod1, ...)

Ce face remove / replaceWith / replaceChildren

remove() scoate elementul din pagină. replaceWith(...) îl înlocuiește cu unul sau mai multe noduri sau texte. replaceChildren(...) șterge tot conținutul unui element și pune în loc nodurile date; fără argumente, golește elementul.

Elementul scos rămâne în memorie cât timp ai o variabilă către el, deci îl poți adăuga din nou mai târziu.

Parametri

Parametru Descriere
noduri Pentru replaceWith și replaceChildren: elementele sau textele noi.

Ce returnează

undefined.

Exemple

Exemplul 1: Ștergere, înlocuire, golire

<div id="notificari"><p class="n">Mesaj 1</p><p class="n">Mesaj 2</p></div>

<script>
  const cutie = document.getElementById("notificari");
  cutie.querySelector(".n").remove();
  console.log(cutie.children.length);

  const nou = document.createElement("strong");
  nou.textContent = "Mesaj citit";
  cutie.querySelector(".n").replaceWith(nou);
  console.log(cutie.innerHTML);

  cutie.replaceChildren();
  console.log(cutie.innerHTML === "");
</script>

Rezultat în browser

1
<strong>Mesaj citit</strong>
true

Greșeli frecvente

  • Golești un element cu innerHTML = "" într-o buclă de randare și apoi îl reconstruiești cu innerHTML +=. replaceChildren(...elemente) face totul într-un singur pas.

Comenzi înrudite