Tässä artikkelissa aiomme keskustella HTML-elementin luomisesta JavaScriptin avulla. Täällä näemme esimerkkejä luodun elementin lisäämisestä asiakirjaan.
Elementtien luominen HTML:llä ei ole ainoa tapa luoda elementtejä. Yksinkertaisuuden vuoksi kuitenkin usein luomme elementtejä suoraan HTML-dokumenttiin, mutta JavaScriptin avulla on myös mahdollista luoda elementtejä.
The document.createElement() käytetään luomaan dynaamisesti HTML-elementtisolmu määritetyllä nimellä JavaScriptin avulla. Tämä menetelmä ottaa elementin nimen parametriksi ja luo kyseisen elementin solmun.
Elementin luomisen jälkeen voimme lisätä luodun elementin dokumenttiin joko appendChild()- tai insertBefore()-menetelmällä.
Voimme käyttää poistaLapsi() menetelmä solmun poistamiseen ja voi myös käyttää korvaaLapsi() menetelmä solmun korvaamiseksi.
Syntaksi
document.createElement(nodename);
Tämä menetelmä hyväksyy yhden parametrin arvon, joka on ilmoitettu seuraavasti:
ero binääripuun ja binäärihakupuun välillä
solmunimi: Se on pakollinen parametri. Tämä parametri on merkkijonotyyppinen. Se määrittää elementin nimen, joka meidän on luotava. Parametrissa määritetty elementin nimi luo elementin; muuten, jos määritetyn elementin nimeä ei tunnisteta, luodaan tuntematon HTML-elementti.
The document.createElement() palauttaa juuri luodun elementin.
Katsotaanpa nyt joitain esimerkkejä sen käytöstä document.createElement() menetelmä. Tässä näytämme kaksi esimerkkiä. Ensimmäisessä esimerkissä käytämme appendChild() -menetelmää elementin lisäämiseksi asiakirjaan, ja toisessa esimerkissä käytämme insertBefore() tapa lisätä luoma elementti document.createElement() menetelmä.
Esimerkki1
Tässä esimerkissä käytämme document.createElement() tapa luoda uusi painikeelementti. Lisäämme luodun elementin käyttämällä appendChild() menetelmä. Täällä on a hauskaa () menetelmä, joka luo uuden painikeelementin käyttämällä createElement() menetelmä. Asetamme tekstin käyttämällä innerHTML joka näkyy painikkeen yläosassa.
Katsotaanpa alla olevaa esimerkkiä.
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 Testaa nyt Lähtö
Yllä olevan koodin suorittamisen jälkeen tulos on -
Kun napsautat annettua painiketta, tulos on -
Esimerkki2
Tässä esimerkissä käytämme document.createElement() tapa luoda uusi painikeelementti. Tässä käytämme insertBefore() tapa lisätä luotu elementti. On div-elementti, jossa on kappaleen alielementti. Uusi painikeelementti lisätään ennen div-elementin kappaleen alielementtiä.
Katsotaanpa alla olevaa esimerkkiä.
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 Testaa nyt Lähtö
Yllä olevan koodin suorittamisen jälkeen tulos on -
Kun napsautat yllä olevaa painiketta, tulos on -
Yllä oleva kuvakaappaus näyttää, että uusi painikeelementti on lisätty ennen kappaleelementtiä. Tämä johtuu siitä, että olemme käyttäneet insertBeofre() menetelmällä luodun uuden elementin lisääminen document.createElement() menetelmä.