V tem članku bomo razpravljali o tem, kako ustvariti element HTML prek JavaScripta. Tukaj bomo videli nekaj primerov za vstavljanje ustvarjenega elementa v dokument.
Ustvarjanje elementov s HTML ni edini način ustvarjanja elementov. Vendar zaradi poenostavitve velikokrat ustvarimo elemente neposredno v dokumentu HTML, vendar je mogoče elemente ustvariti tudi z uporabo JavaScripta.
The document.createElement() se uporablja za dinamično ustvarjanje vozlišča elementa HTML z navedenim imenom prek JavaScripta. Ta metoda vzame ime elementa kot parameter in ustvari to vozlišče elementa.
Po izdelavi elementa lahko uporabimo metodo appendChild() ali metodo insertBefore(), da ustvarjeni element vstavimo v dokument.
Lahko uporabimo odstraniOtroka() metodo za odstranitev vozlišča in lahko uporabite tudi zamenjajChild() način zamenjave vozlišča.
Sintaksa
document.createElement(nodename);
Ta metoda sprejme eno samo vrednost parametra, ki je navedena kot sledi:
sql ddl ukazi
ime vozlišča: Je obvezen parameter. Ta parameter je vrste niza. Določa ime elementa, ki ga moramo ustvariti. Ime elementa, podano v parametru, bo ustvarilo element; sicer, če podanega imena elementa ni prepoznano, bo ustvarjen neznan element HTML.
The document.createElement() bo vrnil novo ustvarjeni element.
Zdaj pa si oglejmo nekaj primerov uporabe document.createElement() metoda. Tukaj bomo pokazali dva primera. V prvem primeru bomo uporabili appendChild() za vstavljanje elementa v dokument, v drugem primeru pa bomo uporabili vstavipred() metoda za vstavljanje elementa, ki ga ustvari document.createElement() metoda.
Primer1
V tem primeru uporabljamo document.createElement() način za ustvarjanje novega elementa gumba. Ustvarjeni element bomo vstavili z uporabo appendChild() metoda. Tukaj je a zabava() metoda, ki bo ustvarila nov element gumba z uporabo createElement() metoda. Besedilo nastavimo z uporabo notranjiHTML ki bo prikazan na vrhu gumba.
Oglejmo si spodnji primer.
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 Preizkusite zdaj Izhod
Po izvedbi zgornje kode bo rezultat -
Po kliku danega gumba bo rezultat -
Primer2
V tem primeru uporabljamo document.createElement() način za ustvarjanje novega elementa gumba. Tukaj uporabljamo vstavipred() način za vstavljanje ustvarjenega elementa. Obstaja element div, ki ima podrejeni element odstavka. Nov element gumba bo vstavljen pred podrejeni element odstavka elementa div.
Oglejmo si spodnji primer.
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 Preizkusite zdaj Izhod
Po izvedbi zgornje kode bo rezultat -
Po kliku zgornjega gumba bo rezultat -
Zgornji posnetek zaslona prikazuje, da je nov element gumba vstavljen pred element odstavka. To je zato, ker smo uporabili vstaviBeofre() metoda za vstavljanje novega elementa, ustvarjenega z uporabo document.createElement() metoda.