Los desarrolladores en su mayoría quieren que sus páginas web sean atractivas y que sean interactivas. Para ello, se añaden botones a la página web. Por ejemplo, cuando es necesario enviar o recibir datos, incluidos eventos de clic para funcionalidades adicionales para el usuario mientras se registra o inicia sesión en una cuenta. En tales casos, los botones permiten al usuario final realizar varias funciones de forma inteligente.
Este blog explicará los métodos para crear botones en JavaScript.
¿Cómo crear un botón en JavaScript?
Para crear un botón en JavaScript, se pueden utilizar los siguientes métodos:
¡Los siguientes enfoques demostrarán el concepto uno por uno!
Método 1: crear un botón en JavaScript usando los métodos “createElement()” y “appendChild()”
Los ' crearElemento() El método ” crea un elemento, y el método “ 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 del documento (DOM) que debe utilizarse, respectivamente.
Sintaxis
documento. crearElemento ( escribe )elemento. añadir Niño ( nodo )
En la sintaxis anterior, “ escribe ” se refiere al tipo de elemento que se creará usando 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 expuesto.
Ejemplo
En primer lugar, un “ botón ” se creará usando el método document.createElement() y se almacenará en una variable llamada “ botón crear ”:
constante botón crear = documento. crearElemento ( 'botón' )A continuación, el “ textointerno La propiedad ” se referirá al botón creado y establecerá el valor de texto del botón especificado de la siguiente manera:
botón crear. textointerno = 'Haz click en mi'Por último, el “ añadir Niño() El método agregará el botón creado a DOM haciendo referencia a la variable en la que está almacenado como argumento:
documento. cuerpo . añadir Niño ( botón crear ) ;El resultado de la implementación anterior resultará de la siguiente manera:
Método 2: crear un botón en JavaScript utilizando el atributo 'Tipo' de la etiqueta 'entrada'
Los ' escribe El atributo ” representa el tipo de elemento de entrada a mostrar. Se puede utilizar para crear un botón especificando ' botón ” como el valor del atributo de tipo de la etiqueta de entrada.
Sintaxis
< tipo de entrada = 'botón' >Aquí, ' botón ” indica el tipo del campo de entrada.
Echa un vistazo al ejemplo que se muestra a continuación.
Ejemplo
En primer lugar, usaremos una etiqueta de entrada, especifique su tipo como ' botón ”, y el valor como “ Haz click en mi ”. Como resultado, se creará un botón. Además, activará el “ crearBoton() ” función cuando se hace clic:
< tipo de entrada = valor del botón = Click_Me al hacer clic = 'botoncrear()' >En el archivo JavaScript, definiremos el “ crearBoton() ” función que generará un cuadro de alerta cuando se haga clic en el botón agregado:
función botón crear ( ) {alerta ( 'Esto es un botón' )
}
Producción
Las técnicas discutidas para crear un botón en JavaScript se pueden utilizar adecuadamente de acuerdo con los requisitos.
Conclusión
Para crear un botón en JavaScript, “ crearElemento() ' y ' añadir Niño() Se pueden aplicar métodos para crear un botón y agregarlo para utilizarlo 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.