U ovom članku raspravljat ćemo o tome kako stvoriti HTML element putem JavaScripta. Ovdje ćemo vidjeti neke primjere za umetanje stvorenog elementa u dokument.
Stvaranje elemenata pomoću HTML-a nije jedini način stvaranja elemenata. Međutim, radi jednostavnosti, mnogo puta stvaramo elemente izravno u HTML dokumentu, ali pomoću JavaScripta također je moguće stvarati elemente.
The document.createElement() koristi se za dinamičko stvaranje čvora HTML elementa s navedenim nazivom putem JavaScripta. Ova metoda uzima naziv elementa kao parametar i stvara taj čvor elementa.
Nakon izrade elementa, možemo koristiti metodu appendChild() ili metodu insertBefore() za umetanje kreiranog elementa u dokument.
Možemo koristiti ukloniChild() metoda za uklanjanje čvora, a također može koristiti zamijeniDijete() način zamjene čvora.
Sintaksa
document.createElement(nodename);
Ova metoda prihvaća jednu vrijednost parametra koja je navedena na sljedeći način:
zašto string nepromjenjiv u Javi
naziv čvora: To je obavezan parametar. Ovaj parametar je tipa niza. Određuje naziv elementa koji moramo kreirati. Naziv elementa naveden u parametru stvorit će element; u suprotnom, ako naziv navedenog elementa nije prepoznat, stvorit će se nepoznati HTML element.
The document.createElement() vratit će novostvoreni element.
Sada, da vidimo neke primjere korištenja document.createElement() metoda. Ovdje ćemo pokazati dva primjera. U prvom primjeru ćemo koristiti dodatiDijete() metodu za umetanje elementa u dokument, au drugom primjeru koristit ćemo se umetni prije() metoda za umetanje elementa koji je stvorio document.createElement() metoda.
Primjer1
U ovom primjeru koristimo document.createElement() metoda za stvaranje novog elementa gumba. Kreirani element ćemo umetnuti pomoću dodatiDijete() metoda. Evo, tu je zabava() metoda koja će stvoriti novi element gumba pomoću stvoritiElement() metoda. Tekst postavljamo pomoću unutarnjiHTML koji će biti prikazan na vrhu gumba.
Pogledajmo donji primjer.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; document.body.appendChild(btn); } <h2> It is an example of using the document.createElement() method. </h2> <h4> Click the below button to insert a new button element in the document. </h4> Create Button Testirajte sada Izlaz
Nakon izvršenja gornjeg koda, izlaz će biti -
Nakon klika na dani gumb, izlaz će biti -
Primjer2
U ovom primjeru koristimo document.createElement() metoda za stvaranje novog elementa gumba. Ovdje koristimo umetni prije() metoda za umetanje stvorenog elementa. Postoji element div koji ima podređeni element odlomka. Novi element gumba bit će umetnut prije podređenog elementa odlomka elementa div.
Pogledajmo donji primjer.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; var element = document.getElementById('d1'); var child = document.getElementById('p1'); element.insertBefore(btn, child); } <h2> It is an example of using the document.createElement() method. </h2> <h4 id="heading4"> Click the below button to insert a new button element in the document. </h4> <p id="p1"> This is a paragraph. </p> Create Button Testirajte sada Izlaz
Nakon izvršenja gornjeg koda, izlaz će biti -
Nakon klika na gornji gumb, izlaz će biti -
Gornja snimka zaslona pokazuje da je novi element gumba umetnut prije elementa odlomka. To je zato što smo koristili insertBeofre() metoda za umetanje novog elementa stvorenog korištenjem document.createElement() metoda.