Utvecklare vill oftast att deras webbsidor ska vara attraktiva och göra dem interaktiva. För detta ändamål läggs knappar till på webbsidan. Till exempel när det finns ett behov av att skicka eller ta emot data, inklusive klickhändelser för ytterligare funktioner för användaren vid registrering eller inloggning på ett konto. I sådana fall tillåter knappar slutanvändaren att utföra olika funktioner smart.
Den här bloggen kommer att förklara metoderna för att skapa knappar i JavaScript.
Hur skapar man knapp i JavaScript?
För att skapa en knapp i JavaScript kan följande metoder användas:
Följande tillvägagångssätt kommer att demonstrera konceptet en efter en!
Metod 1: Skapa knapp i JavaScript med metoderna 'createElement()' och 'appendChild()'
den ' createElement() ”-metoden skapar ett element, och appendChild() ”-metoden lägger till ett element till det sista underordnade av ett element. Dessa metoder kommer att tillämpas för att skapa en knapp och lägga till den i dokumentobjektmodellen (DOM) som måste användas.
Syntax
dokumentera. skapaElement ( typ )element. appendChild ( nod )
I ovanstående syntax, ' typ ' hänvisar till typen av element som kommer att skapas med metoden createElement() och ' nod ” är noden som kommer att läggas till med hjälp av metoden appendChild().
Följande exempel kommer att förklara det angivna konceptet.
Exempel
För det första, en ' knapp ” kommer att skapas med metoden document.createElement() och lagras i en variabel som heter ” skapaknapp ”:
konst skapaknapp = dokumentera. skapaElement ( 'knapp' )Därefter ' innerText Egenskapen kommer att referera till den skapade knappen och ställa in textvärdet för den angivna knappen enligt följande:
skapaknapp. innerText = 'Klicka här'Slutligen, ' appendChild() ”-metoden kommer att lägga till den skapade knappen till DOM genom att referera till variabeln där den är lagrad som ett argument:
dokumentera. kropp . appendChild ( skapaknapp ) ;Resultatet av ovanstående implementering kommer att resultera enligt följande:
Metod 2: Skapa knapp i JavaScript med hjälp av 'Type'-attribut för 'input'-tagg
den ' typ ”-attribut representerar typen av inmatningselement som ska visas. Den kan användas för att skapa en knapp genom att ange ' knapp ” som värdet för typattributet för inmatningstaggen.
Syntax
< ingångstyp = 'knapp' >Här, ' knapp ” indikerar typen av inmatningsfält.
Kolla in nedanstående exempel.
Exempel
Först kommer vi att använda en input-tagg, ange dess typ som ' knapp ', och värde som ' Klicka här ”. Som ett resultat kommer en knapp att skapas. Dessutom kommer det att utlösa ' createButton() ”-funktion när du klickar:
< ingångstyp = knappvärde = Click_Me onclick = 'createButton()' >I JavaScript-filen kommer vi att definiera ' createButton() ”-funktion som genererar en varningsruta när den tillagda knappen klickas:
fungera skapaknapp ( ) {varna ( 'Detta är en knapp' )
}
Produktion
De diskuterade teknikerna för att skapa en knapp i JavaScript kan användas på lämpligt sätt enligt kraven.
Slutsats
För att skapa en knapp i JavaScript, ' createElement() ' och ' appendChild() ”-metoder kan användas för att skapa en knapp och lägga till den för att användas i DOM. En annan teknik som kan användas för att skapa en knapp är att definiera en inmatningstyp och lägga till tillhörande funktionalitet. Den här artikeln demonstrerade metoderna för att skapa en knapp i JavaScript.