Crearea, adăugarea, înlocuirea şi ștergerea elementelor.

Crearea elementelor

Pentru a crea elemente, obiectul document are următoarele metode:

createElement(elementName): Creează un element HTML, a cărui etichetă este transmisă ca parametru. Returnează elementul creat
createTextNode(text): Creează și returnează un nod text. Textul nodului este transmis ca parametru

Creem un element folosind createElement:

const header = document.createElement("h1");        // cream un titlu <h1>
console.log(header);  // <h1></h1>

Astfel, variabila header va stoca o referință la elementul h1.

Creem un nod text folosind createTextNode:

const headerText = document.createTextNode("Hello World"); // cream un nod text
console.log(headerText);  // "Hello World"

Adăugarea elementelor

Dar nu este suficient să creăm elemente, acestea trebuie adăugate și pe pagină.

Pentru adăugarea elementelor putem folosi una dintre metodele obiectului Node:

appendChild(newNode): Adaugă un nou nod newNode la sfârșitul colecției de noduri copil
insertBefore(newNode, referenceNode): Adaugă un nou nod newNode înaintea nodului referenceNode

Folosim metoda appendChild():

const header = document.createElement("h1");        // cream un titlu <h1>
const headerText = document.createTextNode("Hello World"); // cream un nod text
header.appendChild(headerText); // adaugam in elementul h1 nodul text
console.log(header);

 // <h1>Hello World</h1>

Și pentru a adăuga elementul creat pe pagină, trebuie să îl adăugăm într-un element existent deja pe pagină.

Desigur, iată traducerea comentariilor din rusă în română în codul tău HTML:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <script>
   const header = document.createElement("h1");     // cream un titlu <h1>
   const headerText = document.createTextNode("Hello World");  // cream un nod text
   header.appendChild(headerText); // adaugam nodul text în elementul h1
   document.body.appendChild(header);  // adaugam elementul h1 pe pagina, în elementul body
   </script>
</body>
</html>

Mai întâi, creăm un element de titlu obișnuit h2 și un nod text. Apoi, adăugăm nodul text în elementul de titlu. Apoi, adăugăm titlul în elementul body:

Trebuie menționat că nu este obligatoriu să creăm un nod text suplimentar pentru definirea textului în interiorul unui element, deoarece putem folosi proprietatea textContent și să-i atribuim direct textul:

const header = document.createElement("h1");        // creăm un titlu <h1>
header.textContent = "Hello World"; // definim textul elementului

În acest caz, nodul text va fi creat implicit la stabilirea textului.

Metoda insertBefore

Metoda appendChild() adaugă un element la sfârșitul containerului. Pentru a specifica mai exact locul adăugării, se poate folosi o altă metodă - insertBefore(), care adaugă un element înaintea unui alt element. De exemplu, avem următoarea pagină:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <p>Text 1</p>
   <p>Text 2</p>
</body>
</html>

Să presupunem că trebuie să adăugăm în elementul body, înaintea primului paragraf, un titlu. Putem face acest lucru astfel:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <p>Text 1</p>
   <p>Text 2</p>
   <script>
   const header = document.createElement("h1");        // creăm un titlu <h1>
   header.textContent = "Page Header"; // definim textul elementului
   // obținem primul paragraf
   const firstP = document.body.firstElementChild;
   // adăugăm elementul h1 înaintea paragrafului firstP
   document.body.insertBefore(header, firstP);
   </script>
</body>
</html>

Dacă avem nevoie să inserăm un nod nou pe a doua, a treia sau orice altă poziție, trebuie să găsim nodul înaintea căruia trebuie să inserăm, folosind combinații ale proprietăților firstElementChild/lastElementChild și nextSibling/previousSibling.

Copierea elementului

Uneori elementele pot fi destul de complexe în compoziție, și este mult mai simplu să le copiem decât să creăm conținutul lor cu apeluri separate. Pentru a copia nodurile deja existente, la obiectul Node se poate folosi metoda cloneNode():

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <div id="article">
       <h1>Home Page</h1>
       <p>Text 1</p>
       <p>Text 2</p>
   </div>
   <script>
   const article = document.getElementById("article");
   // obținem ultimul paragraf
   const lastP = article.lastElementChild;
   // clonăm elementul lastP
   const newLastP = lastP.cloneNode(true);
   // modificăm textul
   newLastP.textContent = "Data publicării: 28/10/2023";
   // adăugăm la sfârșitul elementului article
   article.appendChild(newLastP);
   </script>
</body>
</html>

În metoda cloneNode(), ca parametru se transmite o valoare logică: dacă se transmite true, atunci elementul va fi copiat cu toate nodurile sale fiice; dacă se transmite false - atunci se copiază fără nodurile fiice. Astfel, în acest caz, copiem nodul cu tot conținutul său și apoi îl adăugăm la sfârșitul elementului cu id="article".

Pentru înlocuirea unui element se utilizează metoda replaceChild(newNode, oldNode) a obiectului Node. Această metodă, ca prim parametru, primește un element nou care înlocuiește elementul vechi oldNode, transmis ca al doilea parametru.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <div id="article">
       <p>Home Page</p>
       <p>Text 1</p>
       <p>Text 2</p>
   </div>
   <script>
   const article = document.getElementById("article");
   // găsim nodul pe care îl vom înlocui
   // să presupunem că este primul element
   const oldNode = article.firstElementChild;
   // creăm un element nou
   const newNode = document.createElement("h2");
   // definim textul pentru acesta
   newNode.textContent = "Hello World";
   // înlocuim nodul vechi cu cel nou
   article.replaceChild(newNode, oldNode);
   </script>
</body>
</html>

În acest caz, înlocuim primul element - primul paragraf, cu un titlu h2.

Ștergerea elementului

Pentru ștergerea unui element se apelează metoda removeChild() a obiectului Node. Această metodă elimină unul dintre nodurile copil:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <div id="article">
       <h1>Home Page</h1>
       <p>Text 1</p>
       <p>Text 2</p>
   </div>
   <script>
   const article = document.getElementById("article");
   // găsim nodul pe care îl vom șterge - ultimul paragraf
   const lastP = article.lastElementChild;
   // ștergem nodul
   article.removeChild(lastP);
   </script>
</body>
</html>

În acest caz, se șterge ultimul paragraf din blocul div.

Ștergerea tuturor elementelor

Uneori este necesar să eliminăm toate elementele. Pentru aceasta, parcurgem toate elementele containerului și le ștergem:

<div id="article">
   <h1>Home Page</h1>
   <p>Text 1</p>
   <p>Text 2</p>
</div>
<script>
const article = document.getElementById("article");
while(article.firstChild){
   article.removeChild(article.firstChild);
}