Les développeurs veulent surtout que leurs pages Web soient attrayantes et les rendent interactives. A cet effet, des boutons sont ajoutés à la page web. Par exemple, lorsqu'il est nécessaire d'envoyer ou de recevoir des données, y compris des événements de clic pour des fonctionnalités supplémentaires pour l'utilisateur lors de l'inscription ou de la connexion à un compte. Dans de tels cas, les boutons permettent à l'utilisateur final d'exécuter intelligemment diverses fonctionnalités.
Ce blog vous expliquera les méthodes pour créer des boutons en JavaScript.
Comment créer un bouton en JavaScript ?
Pour créer un bouton en JavaScript, les méthodes suivantes peuvent être utilisées :
Les approches suivantes démontreront le concept un par un !
Méthode 1 : Créer un bouton en JavaScript à l'aide des méthodes 'createElement()' et 'appendChild()'
La ' créerÉlément() ” crée un élément, et la méthode “ ajouterEnfant() ” ajoute un élément au dernier enfant d'un élément. Ces méthodes seront appliquées pour créer un bouton et l'ajouter au modèle d'objet de document (DOM) qui doit être utilisé, respectivement.
Syntaxe
document. créerÉlément ( taper )élément. ajouterEnfant ( nœud )
Dans la syntaxe ci-dessus, ' taper ' fait référence au type d'élément qui sera créé à l'aide de la méthode createElement(), et ' nœud ” est le nœud qui sera ajouté à l'aide de la méthode appendChild().
L'exemple suivant expliquera le concept énoncé.
Exemple
Tout d'abord, un « bouton ' sera créé à l'aide de la méthode document.createElement() et stocké dans une variable nommée ' créerBouton ” :
constante créerBouton = document. créerÉlément ( 'bouton' )Ensuite, le « Texteintérieur ” fera référence au bouton créé et définira la valeur textuelle du bouton spécifié comme suit :
créerBouton. Texteintérieur = 'Clique_moi'Enfin, le « ajouterEnfant() ” ajoutera le bouton créé au DOM en se référant à la variable dans laquelle il est stocké en tant qu'argument :
document. corps . ajouterEnfant ( créerBouton ) ;La sortie de l'implémentation ci-dessus se traduira comme suit :
Méthode 2 : créer un bouton en JavaScript à l'aide de l'attribut 'Type' de la balise 'input'
La ' taper ” L'attribut représente le type d'élément d'entrée à afficher. Il peut être utilisé pour créer un bouton en spécifiant ' bouton ” comme valeur de l'attribut type de la balise d'entrée.
Syntaxe
< type d'entrée = 'bouton' >Ici, ' bouton ” indique le type de champ de saisie.
Découvrez l'exemple ci-dessous.
Exemple
Tout d'abord, nous allons utiliser une balise d'entrée, spécifier son type comme ' bouton ', et la valeur comme ' Click_Me ”. En conséquence, un bouton sera créé. De plus, cela déclenchera le ' créerBouton() ” fonction lorsque vous cliquez dessus :
< type d'entrée = valeur du bouton = Click_Me onclick = 'CréerBouton()' >Dans le fichier JavaScript, nous allons définir le ' créerBouton() » fonction qui générera une boite d'alerte lorsque le bouton ajouté sera cliqué :
fonction créerBouton ( ) {alerte ( 'C'est un bouton' )
}
Production
Les techniques discutées pour créer un bouton en JavaScript peuvent être utilisées de manière appropriée en fonction des besoins.
Conclusion
Pour créer un bouton en JavaScript, ' créerÉlément() ' et ' ajouterEnfant() ” peuvent être appliquées pour créer un bouton et l'ajouter pour l'utiliser dans le DOM. Une autre technique qui peut être utilisée pour créer un bouton consiste à définir un type d'entrée et à ajouter la fonctionnalité associée. Cet article a démontré les méthodes pour créer un bouton en JavaScript.