¿Quieres saber cómo crear un botón con JavaScript? En este artículo te explico todo lo que debes saber para hacerlo y algunos códigos de ejemplo que puedes utilizar en tus proyectos.
¡Despegamos!
Índice de Contenidos
En HTML se utiliza la etiqueta <button> para definir un botón en la página. Dentro de esta etiqueta, se escribe el texto que se desee que aparezca en el botón. Por ejemplo:
<button>HTML Masters</button>
El resultado sería algo similar a lo siguiente:
Una vez definido el botón, es posible darle estilos mediante el lenguaje CSS o aplicarle funcionalidades a través de JavaScript.
La función de JS createElement para crear un botón
La función createElement en JavaScript se utiliza para crear un elemento de HTML de forma dinámica. Se utiliza en conjunto con el objeto document, que representa el documento HTML actual. La sintaxis de esta función es la siguiente:
document.createElement(element)
Donde «element» es el tipo de elemento que deseas crear («div», «p», «button», etc.). Por ejemplo, para crear un botón en JavaScript se podría emplear la siguiente sentencia:
var newButton = document.createElement("button");
El código anterior define en una variable llamada newButton la creación de un botón HTML. Recomendamos emplear una variable para trabajar más fácilmente con el botón posteriormente, ya que necesitarás emplear más funciones y propiedades de JavaScript.
Recuerda que para añadir código JavaScript a un documento HTML, es necesario definirlo entre las etiquetas <script> y </script>, por lo que el código quedaría de la siguiente manera:
<script>
var newButton = document.createElement("button");
</script>
Una vez se encuentra la variable creada, puedes emplear otras funciones de JavaScript para construir las propiedades del botón y mostrarlo en pantalla posteriormente.
Definiendo el texto del botón JavaScript
Una vez está el botón creado, podremos definir el texto que se va a mostrar en él con la propiedad Element.innerHTML. Siguiendo con el código anterior, bastaría con aplicar esta propiedad sobre la variable newButton que se ha definido previamente, indicando el valor del texto. Por ejemplo:
<script>
var newButton = document.createElement("button");
newButton.innerHTML = "HTML Masters";
</script>
Ahora sólo quedaría hacer que dicho elemento se visualice en pantalla.
Mostrando el botón JavaScript a los usuarios con appendChild
Una vez que el elemento ha sido configurado, se puede añadir el botón al documento utilizando la función appendChild(). Este método se aplica sobre el contenedor en el que quieras mostrar el botón JavaScript. Es decir, sirve para añadir «hijos» a un elemento «padre» del DOM (document object model).
En el siguiente ejemplo te muestro todo el código necesario para crear un documento HTML en el que se añade un botón con JavaScript al body de la página:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Botón JS</title>
</head>
<body>
<footer>
<script>
var newButton = document.createElement("button");
newButton.innerHTML = "HTML Masters";
document.body.appendChild(newButton);
</script>
</footer>
</body>
</html>
Añadiendo atributos al botón JavaScript
Si quieres añadir determinados atributos al botón, puedes usar la función setAttribute. Un caso muy típico es el de añadir un ID al elemento, muy habitualmente para asignar estilos CSS al botón. Siguiendo con el ejemplo anterior, bastaría con añadir al script la siguiente sentencia:
newButton.setAttribute("id", "miboton");
Al hablar de botones, en muchas ocasiones, las personas realmente están buscando definir enlaces. Es por ello que, en el siguiente ejemplo, te muestro cómo crear un enlace con JavaScript en el que se define su atributo href, se establecen sus estilos y se añade al documento HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Botón JS</title>
<style>
#mienlace {
color: #fff;
background-color: lightblue;
padding: 1rem;
border: 1px solid lightblue;
transition: 0.3s ease all;
display: flex;
justify-content: center;
margin: 1rem;
width: 10rem;
}
#mienlace:hover {
color: lightblue;
background-color: #fff;
}
</style>
</head>
<body>
<footer>
<script>
var newLink = document.createElement("a");
newLink.innerHTML = "HTML Masters";
newLink.setAttribute("id", "mienlace");
document.body.appendChild(newLink);
</script>
</footer>
</body>
</html>
El resultado sería un enlace como el siguiente:
Conclusión
En definitiva, ten en cuenta que puedes crear cualquier elemento HTML con JavaScript empleando la función createElement. A continuación, puedes agregar contenido a él utilizando la propiedad innerHTML, se pueden agregar atributos utilizando la función setAttribute y es posible añadirlos al DOM empleando appendChild.
Espero que con todo ello puedas crear tus botones con JavaScript. Si tienes cualquier duda, no dudes en dejarme un comentario.
¡Hasta la próxima!
Adri says:
Muy sencillo y facil de entender, estare leyendo mas articulos, gracias
htmlmaster says:
Muchas gracias a ti por la lectura Adri! 🙂