Inyectar HTML usando JS

Lección 15 de 18 del curso Nubes en movimiento - Proyecto de HTML/CSS/JS de Coddy.

¡En las próximas dos lecciones, inyectaremos las nubes usando JavaScript!

El método document.getElementById() devuelve un objeto de elemento que representa el elemento cuya propiedad id coincide con la cadena especificada. Dado que los IDs de los elementos deben ser únicos si se especifican, son una forma útil de acceder rápidamente a un elemento específico. Por ejemplo:

const elem = document.getElementById("myid");

El siguiente ejemplo obtiene el elemento con el id “myid” y lo almacena en una variable llamada elem.

Después de obtener un objeto de elemento, puedes reemplazar su HTML interno:

elem.innerHTML = '<p>Hello!</p>';

Por ejemplo, si tu código HTML es:

<div id="myid">
</div>

Después de la inyección anterior, el código HTML se verá así:

<div id="myid">
	<p>Hello!</p>
</div>

Desafío

Fácil

Tu tarea es inyectar la etiqueta h1 con el texto "Some text" dentro del elemento cuyo id es igual a “container” (nuestro contenedor de nubes).

Añade el nuevo código al inicio de tu archivo JavaScript, no borres nada de lo que ya has hecho.

Nota: Debería sobrescribir el elemento de nube existente, no te preocupes, recuperaremos la nube en la próxima lección.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>