Come creare il pulsante in JavaScript

Gli sviluppatori per lo più vogliono che le loro pagine web siano attraenti e le rendono interattive. A tale scopo, i pulsanti vengono aggiunti alla pagina Web. Ad esempio, quando è necessario inviare o ricevere dati, inclusi eventi di clic per funzionalità aggiuntive per l'utente durante la registrazione o l'accesso a un account. In tali casi, i pulsanti consentono all'utente finale di eseguire varie funzionalità in modo intelligente.

Questo blog spiegherà i metodi per creare pulsanti in JavaScript.

Come creare il pulsante in JavaScript?

Per creare il pulsante in JavaScript, è possibile utilizzare i seguenti metodi:

• Metodi "CreateElement ()" e "AppendChild ()"
• Attributo "Tipo" del tag "Input"

I seguenti approcci dimostreranno il concetto uno per uno!

Metodo 1: Crea pulsante in JavaScript utilizzando i metodi "CreateElement ()" e "AppendChild ()"

IL "createElement ()"Metodo crea un elemento e il"appendChild ()"Il metodo aggiunge un elemento all'ultimo figlio di un elemento. Questi metodi verranno applicati per la creazione di un pulsante e aggiungendolo al modello Object Model (DOM) che deve essere utilizzato, rispettivamente.

Sintassi

documento.CreateElement (tipo)
elemento.AppendChild (nodo)

Nella sintassi sopra, "tipo"Si riferisce al tipo di elemento che verrà creato utilizzando il metodo createElement () e"nodo"È il nodo che verrà aggiunto con l'aiuto del metodo AppendChild ().

Il seguente esempio spiegherà il concetto dichiarato.

Esempio

In primo luogo, a "pulsante"Verrà creato utilizzando il documento.metodo createElement () e memorizzato in una variabile denominata "Creabutton":

const createButton = Documento.CreateElement ('Button')

Successivamente, il "testo interno"La proprietà si riferirà al pulsante creato e imposterà il valore di testo del pulsante specificato come segue:

Creabutton.InnerText = 'Click_me'

Infine, il "appendChild ()"Il metodo aggiungerà il pulsante creato a DOM riferendosi alla variabile in cui viene archiviato come argomento:

documento.corpo.AppendChild (CreateButton);

L'output dell'implementazione di cui sopra risulterà come segue:

Metodo 2: Crea pulsante in JavaScript utilizzando l'attributo "Tipo" del tag "Input"

IL "tipo"L'attributo rappresenta il tipo di elemento di input da visualizzare. Può essere utilizzato per creare un pulsante specificando "pulsante"Come valore dell'attributo di tipo del tag di input.

Sintassi

Qui, "pulsante"Indica il tipo di campo di input.

Dai un'occhiata all'esempio seguente.

Esempio

In primo luogo, useremo un tag di input, specifichiamo il suo tipo come "pulsante”E valore come"Cliccami". Di conseguenza, verrà creato un pulsante. Inoltre, attiverà il "CreateButton ()"Funzione quando è cliccata:

Nel file JavaScript, definiremo il "CreateButton ()"Funzione che genererà una casella di avviso quando verrà fatto clic sul pulsante aggiunto:

funzione createButton ()
Avviso ("Questo è un pulsante")

Produzione

Le tecniche discusse per creare un pulsante in JavaScript possono essere utilizzate opportunamente in base ai requisiti.

Conclusione

Per creare un pulsante in JavaScript, "createElement ()" E "appendChild ()"I metodi possono essere applicati per la creazione di un pulsante e aggiungendolo da utilizzare nel DOM. Un'altra tecnica che può essere utilizzata per creare un pulsante è definire un tipo di input e aggiungere la funzionalità associata. Questo articolo ha dimostrato i metodi per creare un pulsante in JavaScript.