A menudo cuando desarrollamos una aplicación, nos vemos en la necesidad de crear “al vuelo” objetos. Si estamos hablando de aplicaciones web, lo típico es poder crear objetos del HTML para cualquier eventualidad. Entonces, lo que vamos a hacer, es utilizar DOM para poder llevar a cabo esa labor. DOM es una interfaz para acceder y modificar el contenido, estructura y estilo de los documentos HTML y XML.
Creación del objeto HTML con JavaScript
Para nuestro ejemplo, vamos a utilizar un documento HTML con sólo la estructura más básica:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Prueba de DOM</title>
</head>
<body>
</body>
</html>
Dentro del <body>, creamos un bloque de código javascript.
<script type="text/javascript">
</script>
Lo primero será, crear el objeto con el método createElement, el cual forma parte de la interfaz document. En su forma más simple, lleva el nombre del objeto que queremos crear.
const nuevodiv = document.createElement("div");
Una vez creado, le asignamos un valor a su propiedad id.
nuevodiv.id = "nuevoDiv";
Como nuestro contenedor será el <body> del documento, lo recuperamos.
const cuerpo = document.body;
Luego, añadimos el div que acabamos de crear con el método appendChild.
cuerpo.appendChild(nuevodiv);
Así va nuestro bloque JavaScript al momento:
<script type="text/javascript">
const nuevodiv = document.createElement("div");
nuevodiv.id = "nuevoDiv";
const cuerpo = document.body;
cuerpo.appendChild(nuevodiv);
</script>
Al visualizar el documento, obviamente no se ve ya que no tiene propiedades más allá de su id. No obstante, podemos verificar su creación con las herramientas de desarrollador de nuestro navegador.
Estilizando nuestro objeto con CSS
Por supuesto, para que el objeto se note, tenemos que ponerle un poco de estilo. Con el atributo style, podemos agregar todas las propiedades CSS que necesitamos. Hagamos algunos ajustes:
Lo primero será aumentar el ancho del objeto a 50%
nuevodiv.style.width = "50%";
Le ponemos un padding de 2% para que tenga un poco de margen interno.
nuevodiv.style.padding = "2%";
Le cambiamos el color de fondo.
nuevodiv.style.background = "#AED5FF";
También le añadimos un borde azul de 3 píxeles.
nuevodiv.style.border = "3px solid #185CC7";
Por último, hacemos sus esquinas redondeadas.
nuevodiv.style.borderRadius = "30px";
Aumentamos al doble el tamaño de la fuente.
nuevodiv.style.fontSize = "2em";
Centramos el texto dentro del div
nuevodiv.style.textAlign = "center";
Así va quedando nuestro código:
const nuevodiv = document.createElement("div");
nuevodiv.id = "nuevoDiv";
const cuerpo = document.body;
cuerpo.appendChild(nuevodiv);
nuevodiv.style.width = "50%";
nuevodiv.style.padding = "2%";
nuevodiv.style.background = "#AED5FF";
nuevodiv.style.border = "3px solid #185CC7";
nuevodiv.style.borderRadius = "30px";
nuevodiv.style.fontSize = "2em";
nuevodiv.style.textAlign = "center";
Y por supuesto, ahora ya se puede ver.
Añadiendo objetos a nuestro objeto
Como el objeto se ve triste y sin vida, vamos a añadir algunos objetos para que se vea mejor. Lo primero será crear un párrafo.
const parrafo = document.createElement("p");
Luego, con el método textContext, le añadimos algo de texto.
parrafo.textContent = "Escribe tu correo y presiona Aceptar";
Ahora, crearemos una caja de texto para escribir correos electrónicos.
const cajaTexto = document.createElement("input");
Y con el método setAttribute, definimos algunos de sus atributos requeridos.
cajaTexto.setAttribute("type", "email");
cajaTexto.setAttribute("placeholder", "Por ejemplo: foo@foo.com");
Después creamos un botón de Aceptar.
const boton = document.createElement("input");
Y definimos algunos de sus atributos básicos.
boton.setAttribute("type", "submit");
boton.setAttribute("value", "Aceptar");
Finalmente, añadimos los tres objetos al div.
nuevodiv.appendChild(parrafo);
nuevodiv.appendChild(cajaTexto);
nuevodiv.appendChild(boton);
Así queda el código final.
const nuevodiv = document.createElement("div");
nuevodiv.id = "nuevoDiv";
const cuerpo = document.body;
cuerpo.appendChild(nuevodiv);
nuevodiv.style.width = "50%";
nuevodiv.style.padding = "2%";
nuevodiv.style.background = "#AED5FF";
nuevodiv.style.border = "3px solid #185CC7";
nuevodiv.style.borderRadius = "30px";
nuevodiv.style.fontSize = "2em";
nuevodiv.style.textAlign = "center";
const parrafo = document.createElement("p");
parrafo.textContent = "Escribe tu correo y presiona Aceptar";
const cajaTexto = document.createElement("input");
cajaTexto.setAttribute("type", "email");
cajaTexto.setAttribute("placeholder", "Por ejemplo: foo@foo.com");
const boton = document.createElement("input");
boton.setAttribute("type", "submit");
boton.setAttribute("value", "Aceptar");
nuevodiv.appendChild(parrafo);
nuevodiv.appendChild(cajaTexto);
nuevodiv.appendChild(boton);
Y al visualizar el resultado en nuestro navegador.
Agregando CSS a nuestros objetos
Finalmente, vamos a añadir un poco de CSS a los objetos que acabamos de incluir en nuestro div. Primero estilizamos la caja de texto.
cajaTexto.style.width = "98%";
cajaTexto.style.padding = "1%";
cajaTexto.style.border = "3px solid #185CC7";
cajaTexto.style.borderRadius = "30px";
cajaTexto.style.textAlign = "center";
cajaTexto.style.fontSize = "1.2em";
Y luego, estilizamos el botón.
boton.style.width = "100%";
boton.style.padding = "1%";
boton.style.background = "#185CC7";
boton.style.color = "#FFF";
boton.style.border = "none";
boton.style.borderRadius = "30px";
boton.style.fontSize = "1.2em";
boton.style.marginTop = "20px";
El código final queda así:
const nuevodiv = document.createElement("div");
nuevodiv.id = "nuevoDiv";
const cuerpo = document.body;
cuerpo.appendChild(nuevodiv);
nuevodiv.style.width = "50%";
nuevodiv.style.padding = "2%";
nuevodiv.style.background = "#AED5FF";
nuevodiv.style.border = "3px solid #185CC7";
nuevodiv.style.borderRadius = "30px";
nuevodiv.style.fontSize = "2em";
nuevodiv.style.textAlign = "center";
const parrafo = document.createElement("p");
parrafo.textContent = "Escribe tu correo y presiona Aceptar";
const cajaTexto = document.createElement("input");
cajaTexto.setAttribute("type", "email");
cajaTexto.setAttribute("placeholder", "Por ejemplo: foo@foo.com");
const boton = document.createElement("input");
boton.setAttribute("type", "submit");
boton.setAttribute("value", "Aceptar");
cajaTexto.style.width = "98%";
cajaTexto.style.padding = "1%";
cajaTexto.style.border = "3px solid #185CC7";
cajaTexto.style.borderRadius = "30px";
cajaTexto.style.textAlign = "center";
cajaTexto.style.fontSize = "1.2em";
boton.style.width = "100%";
boton.style.padding = "1%";
boton.style.background = "#185CC7";
boton.style.color = "#FFF";
boton.style.border = "none";
boton.style.borderRadius = "30px";
boton.style.fontSize = "1.2em";
boton.style.marginTop = "20px";
nuevodiv.appendChild(parrafo);
nuevodiv.appendChild(cajaTexto);
nuevodiv.appendChild(boton);
Siendo este el resultado final.
Prueba el ejercicio en JSFiddle y experimenta con ello.
Comentarios, dudas o preguntas
¡Y eso es todo! No olvides dejar tus comentarios, dudas y / o preguntas. Con gusto las respondemos.
Docente, blogger, developer. Editor & Copy
Sobre: #Blogging, #Excel, #VBA, #Android, #PHP, #JavaScript, #Java, #WordPress, #IoT, #Python
