Entwickler möchten meistens, dass ihre Webseiten attraktiv und interaktiv sind. Zu diesem Zweck werden der Webseite Schaltflächen hinzugefügt. Zum Beispiel, wenn Daten gesendet oder empfangen werden müssen, einschließlich Klickereignisse für zusätzliche Funktionen für den Benutzer, während er sich registriert oder sich bei einem Konto anmeldet. In solchen Fällen ermöglichen Schaltflächen dem Endbenutzer, verschiedene Funktionen intelligent auszuführen.
In diesem Blog werden die Methoden zum Erstellen von Schaltflächen in JavaScript erläutert.
Wie erstelle ich eine Schaltfläche in JavaScript?
Um eine Schaltfläche in JavaScript zu erstellen, können die folgenden Methoden verwendet werden:
Die folgenden Ansätze werden das Konzept nacheinander demonstrieren!
Methode 1: Schaltfläche in JavaScript mit den Methoden „createElement()“ und „appendChild()“ erstellen
Das ' createElement() “-Methode erstellt ein Element, und die „ appendChild() ”-Methode hängt ein Element an das letzte untergeordnete Element eines Elements an. Diese Methoden werden angewendet, um eine Schaltfläche zu erstellen und sie an das zu verwendende Document Object Model (DOM) anzuhängen.
Syntax
dokumentieren. createElement ( Typ )Element. Kind anhängen ( Knoten )
In der obigen Syntax „ Typ “ bezieht sich auf den Elementtyp, der mit der createElement()-Methode erstellt wird, und „ Knoten ” ist der Knoten, der mit Hilfe der Methode appendChild() angehängt wird.
Das folgende Beispiel erläutert das angegebene Konzept.
Beispiel
Zunächst einmal ein „ Taste “ wird mit der Methode document.createElement() erstellt und in einer Variablen namens „ createButton “:
konst createButton = dokumentieren. createElement ( 'Taste' )Als nächstes das „ innerText ”-Eigenschaft bezieht sich auf die erstellte Schaltfläche und legt den Textwert der angegebenen Schaltfläche wie folgt fest:
createButton. innerText = 'Klick mich'Zu guter Letzt das „ appendChild() ”-Methode hängt die erstellte Schaltfläche an DOM an, indem sie auf die Variable verweist, in der sie als Argument gespeichert ist:
dokumentieren. Karosserie . Kind anhängen ( createButton ) ;Die Ausgabe der obigen Implementierung ergibt sich wie folgt:
Methode 2: Erstellen Sie eine Schaltfläche in JavaScript mit dem „Type“-Attribut des „input“-Tags
Das ' Typ ”-Attribut repräsentiert den Typ des anzuzeigenden Eingabeelements. Es kann verwendet werden, um eine Schaltfläche zu erstellen, indem Sie „ Taste ” als Wert des type-Attributs des Input-Tags.
Syntax
< Eingabetyp = 'Taste' >Hier, ' Taste ” gibt den Typ des Eingabefeldes an.
Schauen Sie sich das unten angegebene Beispiel an.
Beispiel
Zuerst verwenden wir ein Eingabe-Tag, geben seinen Typ an als „ Taste “ und Wert als „ Klick mich “. Als Ergebnis wird eine Schaltfläche erstellt. Außerdem löst es die „ createButton() ” Funktion beim Anklicken:
< Eingabetyp = Tastenwert = Click_Me onclick = 'createButton()' >In der JavaScript-Datei definieren wir die „ createButton() ”-Funktion, die ein Warnfeld generiert, wenn auf die hinzugefügte Schaltfläche geklickt wird:
Funktion createButton ( ) {Alarm ( 'Das ist ein Knopf' )
}
Ausgabe
Die diskutierten Techniken zum Erstellen einer Schaltfläche in JavaScript können entsprechend den Anforderungen geeignet verwendet werden.
Fazit
Um eine Schaltfläche in JavaScript zu erstellen, „ createElement() ' und ' appendChild() „Methoden können angewendet werden, um eine Schaltfläche zu erstellen und sie zur Verwendung im DOM anzuhängen. Eine andere Technik, die zum Erstellen einer Schaltfläche verwendet werden kann, besteht darin, einen Eingabetyp zu definieren und die zugehörige Funktionalität hinzuzufügen. In diesem Artikel wurden die Methoden zum Erstellen einer Schaltfläche in JavaScript demonstriert.