Hvordan lage knapp i JavaScript

Utviklere vil stort sett at websidene deres skal være attraktive og gjøre dem interaktive. For dette formålet legges knapper på websiden. For eksempel, når det er behov for å sende eller motta data, inkludert klikkhendelser for ekstra funksjonalitet for brukeren mens du registrerer eller logger på en konto. I slike tilfeller tillater knapper sluttbrukeren å utføre forskjellige funksjonaliteter smart.

Denne bloggen vil forklare metodene for å lage knapper i JavaScript.

Hvordan lage knapp i JavaScript?

For å opprette knapp i JavaScript, kan følgende metoder brukes:

• “CreateElement ()” og “appendchild ()” metoder
• “Type” attributt til “input” -kode

Følgende tilnærminger vil demonstrere konseptet en etter en!

Metode 1: Opprett knapp i JavaScript ved å bruke “CreateElement ()” og “AppendChild ()” -metoder

“CreateElement ()”Metode skaper et element, og“vedlegg ()”Metode legger et element til det siste barnet til et element. Disse metodene vil bli brukt for å lage en knapp og legge den til henholdsvis dokumentobjektsmodellen (DOM) som må brukes.

Syntaks

dokument.CreateElement (type)
element.AppendChild (node)

I syntaks ovenfor, "type”Henviser til typen element som skal opprettes ved hjelp av CreateElement () -metoden, og“Node”Er noden som vil bli vedlagt ved hjelp av AppendChild () -metoden.

Følgende eksempel vil forklare det uttalte konseptet.

Eksempel

For det første en “knapp”Vil bli opprettet ved hjelp av dokumentet.CreateElement () -metode og lagret i en variabel som heter “CreateButton”:

const createButton = dokument.CreateElement ('knapp')

Neste, “Innertekst”Egenskaper vil referere til den opprettede knappen og angi tekstverdien til den spesifiserte knappen som følger:

CreateButton.innertekst = 'click_me'

Til slutt "vedlegg ()”Metode vil legge den opprettede knappen til DOM ved å referere til variabelen der den er lagret som et argument:

dokument.kropp.AppendChild (CreateButton);

Utgangen fra implementeringen ovenfor vil resultere som følger:

Metode 2: Opprett knapp i JavaScript ved å bruke "Type" attributt til "Input" -kode

“type”Attributt representerer typen inngangselement som skal vises. Den kan brukes til å opprette en knapp ved å spesifisere “knapp”Som verdien av typen attributt til inngangskoden.

Syntaks

Her, “knapp”Indikerer typen inngangsfelt.

Sjekk ut det undergitte eksemplet.

Eksempel

For det første vil vi bruke en inngangskode, spesifisere typen som "knapp”, Og verdi som“Klikk på meg”. Som et resultat vil det opprettes en knapp. Videre vil det utløse “createButton ()”Funksjon når du klikker:

I JavaScript -filen vil vi definere "createButton ()”Funksjon som genererer en varslingsboks når den ekstra knappen vil bli klikket:

funksjon createButton ()
Varsel ("Dette er en knapp")

Produksjon

De diskuterte teknikkene for å lage en knapp i JavaScript kan brukes på passende måte i henhold til kravene.

Konklusjon

For å opprette en knapp i JavaScript, “CreateElement ()”Og“vedlegg ()”Metoder kan brukes for å lage en knapp og legge den til som skal brukes i DOM. En annen teknikk som kan brukes til å lage en knapp er å definere en inngangstype og legge til den tilhørende funksjonaliteten. Denne artikkelen demonstrerte metodene for å lage en knapp i JavaScript.