Cómo crear botón en JavaScript

Los desarrolladores en su mayoría quieren que sus páginas web sean atractivas y las hagan interactivas. Para este propósito, los botones se agregan a la página web. Por ejemplo, cuando es necesario enviar o recibir datos, incluidos los eventos de clic para las funcionalidades adicionales para el usuario al registrarse o iniciar sesión en una cuenta. En tales casos, los botones permiten al usuario final realizar diversas funcionalidades de manera inteligente.

Este blog explicará los métodos para crear botones en JavaScript.

Cómo crear botón en JavaScript?

Para crear el botón en JavaScript, se pueden utilizar los siguientes métodos:

• Métodos "CreateElement ()" y "AppendChild"
• Atributo "Escriba" de la etiqueta "Entrada"

Los siguientes enfoques demostrarán el concepto uno por uno!

Método 1: Crear botón en JavaScript usando métodos "CreateElement ()" y "AppendChild"

El "createElement ()El método "crea un elemento y el"añadir Niño()El método "agrega un elemento al último hijo de un elemento. Estos métodos se aplicarán para crear un botón y agregarlo al modelo de objeto de documento (DOM) que debe utilizarse, respectivamente.

Sintaxis

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

En la sintaxis anterior, "tipo"Se refiere al tipo de elemento que se creará utilizando el método CreateElement () y"nodo"Es el nodo que se agregará con la ayuda del método AppendChild ().

El siguiente ejemplo explicará el concepto declarado.

Ejemplo

En primer lugar, un "botón"Se creará utilizando el documento.método createElement () y almacenado en una variable llamada "createButton":

const createButton = documento.CreateElement ('botón')

A continuación, el "intextoLa propiedad se referirá al botón creado y establecerá el valor de texto del botón especificado de la siguiente manera:

createButton.inteText = 'click_me'

Por último, el "añadir Niño()El método "agregará el botón creado a DOM refiriéndose a la variable en la que se almacena como un argumento:

documento.cuerpo.appendChild (createButton);

La salida de la implementación anterior dará como resultado lo siguiente:

Método 2: Crear botón en JavaScript usando el atributo "Tipo" de la etiqueta "Entrada"

El "tipo"El atributo representa el tipo de elemento de entrada para mostrar. Se puede usar para crear un botón especificando "botón"Como el valor del atributo de tipo de la etiqueta de entrada.

Sintaxis

Aquí, "botón"Indica el tipo de campo de entrada.

Echa un vistazo al ejemplo dado a continuación.

Ejemplo

En primer lugar, usaremos una etiqueta de entrada, especificaremos su tipo como "botón", Y valor como"Haz click en mi". Como resultado, se creará un botón. Además, activará el "createButton ()"Función cuando se hace clic:

En el archivo JavaScript, definiremos el "createButton ()Función "que generará un cuadro de alerta cuando se haga clic en el botón agregado:

función createButton ()
alerta ("Este es un botón")

Producción

Las técnicas discutidas para crear un botón en JavaScript se pueden utilizar de manera adecuada de acuerdo con los requisitos.

Conclusión

Para crear un botón en JavaScript, "createElement ()" y "añadir Niño()Los métodos se pueden aplicar para crear un botón y agregarlo para ser utilizado en el DOM. Otra técnica que se puede usar para crear un botón es definir un tipo de entrada y agregar la funcionalidad asociada. Este artículo demostró los métodos para crear un botón en JavaScript.