11 - Introducción al DOM

Estructura inicial

En nuestra carpeta de proyecto crearemos la siguiente estructura:

/
├── js/
│   └── 11-document-write.js
└── index.html

Y un código sencillo para nuestro HTML:

<!DOCTYPE html>
<html lang="es">
<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">
    <script src="./js/11-document-write.js"></script>
    <title>11 - Introducción al DOM</title>
</head>
<body>
    
</body>
</html>

Mostrando valores en nuestra web

La forma más básica de mostrar contenido en nuestra web con JavaScript es mediante document.write(). Veamos como funciona:

document.write("Hola mundo") //Muestra el texto sin ninguna etiqueta
document.write("<h1>Texto en un H1</h1>") //Muestra el texto con un etiqueta <h1>

let nombre = "Blanca"
document.write("<p>Me llamo " + nombre + ".</p>") //Al igual que con console.log() podemos mostrar valores de variables.

Si inspeccionamos el código de nuestra web del navegador deberíamos ver algo como esto:

<!DOCTYPE html>
<html lang="es">
<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">
    <script src="./js/11-document-write.js"></script>
    <title>11 - Introducción al DOM</title>
</head>
<body>
    Hola mundo
    <h1>Texto en un H1</h1>
    <p>Me llamo Blanca.</p>
</body>
</html>

Problemas de usar esta función

Hay dos motivos por los que no es recomendable usar document.write() fuera de ejercicios de aprendizaje: