Crear otro elemento con JavaScript (súper fácil)

el

 


Crear otro elemento con JavaScript (súper fácil)

Crea una carpeta que llamaremos "crear_elemento", dentro de la carpeta crearemos un archivo llamado index con la extensión .html quedando como "index.html".

Nota: Yo te recomiendo utilizar Visual Studio Code, es súper fácil.

En el archivo index.html colocarás el siguiente código:


<html>
<title>CreateElementJS</title>
<body>
<h1>Create Element</h1>
<button type="button" onclick="createButton()">Presioname</button>
<div id="contenedor"></div>
<script src="script.js"></script>
</body>
</html> 
                                                                                     

Después crearemos otro archivo dentro de nuestra carpeta llamado "script.js" en el que colocaremos el siguiente código:


function createButton(){
var x = document.createElement("BUTTON");
var t = document.createTextNode("Ahora presioname a mi!");
x.onclick = function alertClick() {
alert('Excelente!!')
};
x.appendChild(t);
document.body.appendChild(x);
}

Explicación: Nuestro primer archivo contiene el código HTML (es el acrónimo de "HyperText Markup Language" en inglés, que traducido al español significa "Lenguaje de Marcado de Hipertexto", da click para saber más sobre html) es decir; quién nos ayudará a que se visualice nuestro contenido desde un navegador web.

Este por sí sólo no puede hacer mucho pero para eso tenemos JavaScript (da click para saber más sobre JavaScript), quién nos ayudará a hacer "la magia" por medio de una función llamada "createButton()" misma que nosotros crearemos como se muestra en el segundo fragmento de código.

¿Qué hace la función?

Crea un objeto html de tipo botón y lo guarda en memoria por medio de una variable llamada "x", posterior le agregamos un atributo que en este caso será el texto del botón y le agregamos un evento cuando se le de click a este botón. En este caso el nuevo botón deberá arrojar una alerta en el navegador.

Resultado:




¡Y listo!

Por favor hazme saber si pudiste conseguirlo y si te gustó el ejercicio.

Comentarios

Publicar un comentario