Ontwikkelaars willen vooral dat hun webpagina's aantrekkelijk zijn en interactief maken. Hiervoor worden buttons aan de webpagina toegevoegd. Bijvoorbeeld wanneer het nodig is om gegevens te verzenden of te ontvangen, inclusief klikgebeurtenissen voor toegevoegde functionaliteiten voor de gebruiker tijdens het registreren of inloggen op een account. In dergelijke gevallen stellen knoppen de eindgebruiker in staat om verschillende functionaliteiten slim uit te voeren.
In deze blog worden de methoden uitgelegd om knoppen in JavaScript te maken.
Hoe maak je een knop in JavaScript?
Om een knop in JavaScript te maken, kunnen de volgende methoden worden gebruikt:
De volgende benaderingen zullen het concept één voor één demonstreren!
Methode 1: Knop maken in JavaScript met behulp van de methoden 'createElement()' en 'appendChild()'
De ' createElement() ” methode maakt een element aan, en de “ appendChild() ”-methode voegt een element toe aan het laatste kind van een element. Deze methoden zullen worden toegepast om respectievelijk een knop te maken en deze toe te voegen aan het Document Object Model (DOM) dat moet worden gebruikt.
Syntaxis
document. createElement ( type )element. appendKind ( knooppunt )
In de bovenstaande syntaxis, ' type ” verwijst naar het type element dat wordt gemaakt met behulp van de methode createElement() en “ knooppunt ” is het knooppunt dat wordt toegevoegd met behulp van de appendChild()-methode.
Het volgende voorbeeld zal het genoemde concept uitleggen.
Voorbeeld
Allereerst een “ knop ” wordt gemaakt met de methode document.createElement() en opgeslagen in een variabele met de naam “ createKnop ”:
const createKnop = document. createElement ( 'knop' )Vervolgens wordt de “ innerText ”-eigenschap verwijst naar de gemaakte knop en stelt de tekstwaarde van de opgegeven knop als volgt in:
creërenKnop. innerText = 'Klik hier'Tot slot de “ appendChild() ” -methode zal de gemaakte knop aan DOM toevoegen door te verwijzen naar de variabele waarin deze als argument is opgeslagen:
document. lichaam . appendKind ( createKnop ) ;De output van de bovenstaande implementatie zal als volgt resulteren:
Methode 2: Knop maken in JavaScript met behulp van 'Type' -kenmerk van 'invoer' -tag
De ' type ”-attribuut staat voor het type invoerelement dat moet worden weergegeven. Het kan worden gebruikt om een knop te maken door op te geven ' knop ” als de waarde van het type attribuut van de invoertag.
Syntaxis
< invoertype: = 'knop' >Hier, ' knop ” geeft het type invoerveld aan.
Bekijk het onderstaande voorbeeld.
Voorbeeld
Ten eerste zullen we een invoertag gebruiken, specificeer het type als ' knop ”, en waarde als “ Klik hier ”. Als resultaat wordt er een knop gemaakt. Bovendien zal het de ' createButton() ” functie wanneer erop wordt geklikt:
< invoertype: = knop waarde = Click_Me onclick = 'createButton()' >In het JavaScript-bestand definiëren we de “ createButton() ”-functie die een waarschuwingsvenster genereert wanneer op de toegevoegde knop wordt geklikt:
functie createKnop ( ) {alarmeren ( 'Dit is een knop' )
}
Uitgang:
De besproken technieken om een knop in JavaScript aan te maken, kunnen naar gelang de vereisten worden gebruikt.
Conclusie
Om een knop in JavaScript te maken, “ createElement() ' en ' appendChild() ”-methoden kunnen worden toegepast om een knop te maken en deze toe te voegen voor gebruik in de DOM. Een andere techniek die kan worden gebruikt om een knop te maken, is het definiëren van een invoertype en het toevoegen van de bijbehorende functionaliteit. Dit artikel demonstreerde de methoden om een knop in JavaScript te maken.