Hvordan lage et HTML -element gjennom JavaScript ved hjelp av CreateElement

HTML er et markeringsspråk som gir struktur til websidene våre, mens JavaScript er et nettprogrammeringsspråk som tilbyr interaktivitet med brukeren. For det meste, for enkelhet, definerer utviklere og lager elementer i HTML. Imidlertid er det ikke den eneste måten å lage elementer, og vi kan også lage elementer ved hjelp av JavaScript -dokumentobjektmetoden CreateElement () for å gjøre websiden vår mer dynamisk. På grunn av dokumentobjektet kan vi få tilgang til HTML -elementer.

Hva er CreateElement ()?

De CreateElement () er et innebygd dokumentobjekt som har funksjonen til å dynamisk lage et HTML-element fra og returnere det nyopprettede HTML-elementet.

De Syntaks av CreateElement () er gitt nedenfor:

var createElement = dokument.CreateElement (htmltagName);

De CreateElement () tar en parameter Htmltagname som er en obligatorisk parameter for typen streng, og det er tagnavnet til et HTML -element.

Det skal bemerkes at CreateElement () Metoden skaper et HTML -element, men for å knytte elementet til dokumentet (webside) må vi bruke vedlegg () eller INSERTBEFORE () metoder.

Nå som vi vet hva CreateElement () Metoden er, la oss se på et eksempel for å bedre forstå CreateElement () metode.

Eksempel1:

I dette eksemplet vil vi opprette et knappelement fra JavaScript med klikket på en allerede eksisterende knapp.

La oss først opprette en knapp i HTML som har en ved trykk Hendelse knyttet til det.

Magisk knapp

Hver gang en bruker vil klikke på knappen, vil den begynne å utføre myfunc () funksjon. Til slutt har vi brukt manus tagg og gitt kilden (kode.JS) av JavaScript -filen som inneholder myfunc () funksjon.

JavaScript -koden er gitt nedenfor:

funksjon myfunc ()
var mybtn = dokument.createElement ("knapp");
MyBtn.InnerHTML = "Ny knapp";
dokument.kropp.appendchild (MyBTN);

I koden ovenfor, først initialiserte vi myfunc () funksjon og opprettet et knappelement ved hjelp av CreateElement () metode. For å gi knappen en tittel brukte vi MyBtn.indrehtml eiendom. Til slutt festet vi knappen til kroppen til HTML -en vår ved hjelp av vedlegg () metode.

Utgangen er gitt nedenfor:

Vi kan se at når vi klikker på Magisk knapp, det oppretter en ny knapp med tittelen “Ny knapp”.

Eksempel2:

I dette eksemplet vil vi lage en H2 Tag of HTML gjennom JavaScript og fest den deretter med HTML -kroppen ved å bruke INSERTBEFORE () metode.

For dette formålet, la oss først skrive HTML -koden:

Sett inn overskriften over dette

Magisk knapp

Resten av koden er den samme som eksempel 1 med unntak av at vi nå har laget et divelement som vi opprettet en

Tag med ID “Para”.

JavaScript -koden er gitt nedenfor:

funksjon myfunc ()
var myContainer = dokument.getElementById ("MyContainer");
var para = dokument.getElementById ("para");
var myheading = dokument.CreateElement ("H2");
Myheading.indrehtml = "ny overskrift";
Mycontainer.Insertbefore (Myheading, para);

Inne i funksjonen får vi først referansen til og

Element av HTML. Så lager vi en

element som bruker CreateElement () metode. Å sette den inn før

elementet vi bruker INSERTBEFORE () metode der vi passerer den nyopprettede

Tag og

Utgangen fra ovennevnte kode er gitt nedenfor:

Hver gang vi klikker på Magic -knappen, et nytt element H2 er opprettet via JavaScript CreateElement () metode.

Konklusjon

Dokumentobjektet gir oss tilgang til HTML-elementer og en av de innebygde metodene til dokumentobjektene er CreateElement () metode. De CreateElement () Metoden brukes til å lage et HTML -element dynamisk ved å ta HTML -tagnavnet som parameter og deretter returnere det nyopprettede HTML -elementet. For å knytte det nyopprettede HTML -elementet til HTML bruker vi vedlegg () eller INSERTBEFORE () metoder.

I dette innlegget så vi hvordan du lager et HTML -element ved hjelp av CreateElement () Metode i JavaScript.