Deci acum avem un corp gol și să adăugăm acolo containerul cu care vom lucra.
În consola browserului, vedem acest element DOM gol. Și acum, după ce l-am creat, îl putem introduce în DOM. Pentru aceasta, avem nevoie de metoda appendChild.
Adică, am găsit prima aplicație pentru element și apoi am adăugat-o ca un element copil al titlului nostru.
Dacă privim în browser, vedem că avem un nou element DOM gol.
Dar vrem ca elementul nostru să fie creat cu clasele de care avem nevoie. Pentru a face acest lucru, putem seta clasele la elementul creat utilizând metoda className.
Acum, în browser avem un element în DOM cu clasa. Dar acum aș dori să adaug un nou text acestui nou element. Putem folosi metoda innerHTML, pe care am studiat-o deja.
Acum vedem în browser că am adăugat un nou element DOM cu text și clasă.
Dar există nuanțe în modul în care funcționează metoda appendChild. Să adăugăm un alt div în aplicația div.
Dacă ne uităm la browser, atunci am afișat mai întâi conținutul și apoi după el a fost afișat elementul creat. Se întâmplă apoi că metoda appendChild adaugă elementul la sfârșit. Aceasta înseamnă că acest element va fi adăugat ca ultimul copil din părinte.
Ce ar trebui să facem acum? La urma urmei, vrem să scoatem mai întâi titlul, apoi conținutul. Metoda .insertBefore ne va ajuta în acest sens. Funcționează exact la fel ca appendChild, dar adaugă elementul DOM la poziția înainte de elementul specificat. Asta este, specificăm primul argument pe care vrem să îl inserăm și cel de-al doilea înainte de care vom introduce copilul.
Deoarece vrem să inserăm înaintea primului copil, putem folosi metoda .firstChild pentru a găsi primul copil al aplicației.
De asemenea, uneori trebuie să eliminăm elemente DOM. Metoda .removeChild ne va ajuta în acest sens. Putem indica pur și simplu elementul pe care dorim să îl eliminăm de la partener.
Asta este, apelăm la aplicația removeChild pentru a elimina copilul.
Există, de asemenea, o versiune mai simplă a înregistrării, când sunăm doar.
Acest cod va funcționa exact la fel.
Articole similare
Trimiteți-le prietenilor: