Udviklere ønsker for det meste, at deres websider skal være attraktive og gøre dem interaktive. Til dette formål tilføjes knapper til websiden. For eksempel, når der er behov for at sende eller modtage data, herunder klikhændelser for tilføjede funktioner for brugeren, mens han registrerer eller logger ind på en konto. I sådanne tilfælde giver knapper slutbrugeren mulighed for at udføre forskellige funktioner smart.
Denne blog vil forklare metoderne til at oprette knapper i JavaScript.
Hvordan opretter man knap i JavaScript?
For at oprette en knap i JavaScript kan følgende metoder bruges:
Følgende tilgange vil demonstrere konceptet én efter én!
Metode 1: Opret knap i JavaScript ved hjælp af metoderne 'createElement()' og 'appendChild()'
Det ' createElement() '-metoden opretter et element, og ' appendChild() ”-metoden tilføjer et element til det sidste underordnede af et element. Disse metoder vil blive anvendt til at oprette en knap og tilføje den til den dokumentobjektmodel (DOM), der skal bruges.
Syntaks
dokument. skabeElement ( type )element. vedhæfteBarn ( node )
I ovenstående syntaks, ' type ' refererer til den type element, der vil blive oprettet ved hjælp af createElement() metoden, og ' node ” er den node, der vil blive tilføjet ved hjælp af appendChild() metoden.
Det følgende eksempel vil forklare det angivne koncept.
Eksempel
For det første en ' knap ' vil blive oprettet ved hjælp af metoden document.createElement() og lagret i en variabel med navnet ' skabeknap ”:
konst skabeknap = dokument. skabeElement ( 'knap' )Dernæst ' indreTekst egenskaben vil referere til den oprettede knap og indstille tekstværdien for den angivne knap som følger:
skabeknap. indreTekst = 'Klik_Mig'Til sidst, ' appendChild() ”-metoden vil tilføje den oprettede knap til DOM ved at henvise til den variabel, hvori den er gemt som et argument:
dokument. legeme . vedhæfteBarn ( skabeknap ) ;Outputtet af ovenstående implementering vil resultere som følger:
Metode 2: Opret knap i JavaScript ved hjælp af 'Type'-attribut for 'input'-tag
Det ' type ”-attribut repræsenterer typen af input-element, der skal vises. Den kan bruges til at oprette en knap ved at angive ' knap ” som værdien af type-attributten for input-tagget.
Syntaks
< input type = 'knap' >Her, ' knap ” angiver typen af indtastningsfeltet.
Tjek nedenstående eksempel.
Eksempel
For det første vil vi bruge et input-tag, angiv dets type som ' knap ', og værdi som ' Klik_Mig ”. Som et resultat vil der blive oprettet en knap. Desuden vil det udløse ' createButton() '-funktion, når der klikkes på:
< input type = knapværdi = Klik_Mig onclick = 'createButton()' >I JavaScript-filen vil vi definere ' createButton() ”-funktion, som genererer en advarselsboks, når der klikkes på den tilføjede knap:
fungere skabeknap ( ) {alert ( 'Dette er en knap' )
}
Produktion
De diskuterede teknikker til at oprette en knap i JavaScript kan bruges passende i henhold til kravene.
Konklusion
For at oprette en knap i JavaScript, ' createElement() ' og ' appendChild() ”-metoder kan anvendes til at oprette en knap og tilføje den til at blive brugt i DOM. En anden teknik, der kan bruges til at oprette en knap, er at definere en inputtype og tilføje den tilhørende funktionalitet. Denne artikel demonstrerede metoderne til at oprette en knap i JavaScript.