HTML DOM

HTML

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Prueba de DOM</title>
</head>
<body>
</body>
</html>

JavaScript

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);