Comment créer un bouton en javascript

Les développeurs veulent que leurs pages Web soient attrayantes et les rendent interactives. À cette fin, 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 ajoutées pour l'utilisateur lors de l'enregistrement ou de la connexion à un compte. Dans de tels cas, les boutons permettent à l'utilisateur final d'effectuer différentes fonctionnalités.

Ce blog expliquera les méthodes pour créer des boutons en javascript.

Comment créer un bouton en javascript?

Pour créer un bouton dans JavaScript, les méthodes suivantes peuvent être utilisées:

• Méthodes "CreateElement ()" et "appendChild ()"
• Attribut «Type» de la balise «d'entrée»

Les approches suivantes démontreront le concept un par un!

Méthode 1: Créer un bouton en javascrip

Le "CreateElement ()«La méthode crée un élément, et le«APPENDCHILD ()»La méthode ajoute un élément au dernier enfant d'un élément. Ces méthodes seront appliquées pour créer un bouton et l'ajoutant au modèle d'objet de document (DOM) qui doit être utilisé, respectivement.

Syntaxe

document.CreateElement (type)
élément.Annexe (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 annexé à l'aide de la méthode APPEDCHILD ().

L'exemple suivant expliquera le concept déclaré.

Exemple

Premièrement, un «bouton"Sera créé à l'aide du document.Méthode createElement () et stockée dans une variable nommée «Createbutton»:

const CreateButton = document.createElement ('bouton')

Ensuite, le «texte de texte”La propriété se réfère au bouton créé et définira la valeur du texte du bouton spécifié comme suit:

Createbutton.innerText = 'click_me'

Enfin, le «APPENDCHILD ()»La méthode ajoutera le bouton créé pour DOM en se référant à la variable dans laquelle il est stocké comme un argument:

document.corps.APPENDCHILD (CreateButton);

La sortie de l'implémentation ci-dessus en résultera comme suit:

Méthode 2: Créer un bouton dans JavaScript à l'aide de l'attribut «Type» de la balise «d'entrée»

Le "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 de type de la balise d'entrée.

Syntaxe

Ici, "bouton»Indique le type du champ de saisie.

Consultez l'exemple donné ci-dessous.

Exemple

Tout d'abord, nous utiliserons une balise d'entrée, spécifier son type comme «bouton», Et la valeur comme«Clic_me". En conséquence, un bouton sera créé. De plus, il déclenchera le «CreateButton ()”Fonction lorsque vous cliquez:

Dans le fichier JavaScript, nous définirons le «CreateButton ()”Fonction qui générera une boîte d'alerte lorsque le bouton ajouté sera cliqué:

fonction createButton ()
alerte ("Ceci est un bouton")

Sortir

Les techniques discutées pour créer un bouton en JavaScript peuvent être utilisées convenablement en fonction des exigences.

Conclusion

Pour créer un bouton en JavaScript, "CreateElement ()" et "APPENDCHILD ()«Les méthodes peuvent être appliquées pour créer un bouton et en avoir appris à 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.