Injetar HTML usando JS

Lição 15 de 18 do curso Nuvens em Movimento - Projeto HTML/CSS/JS da Coddy.

Nas próximas duas lições, injetaremos as nuvens usando JavaScript!

O método document.getElementById() retorna um objeto de elemento que representa o elemento cuja propriedade id corresponde à string especificada. Como os IDs de elementos devem ser exclusivos, se especificados, eles são uma maneira útil de acessar um elemento específico rapidamente. Por exemplo:

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

O exemplo a seguir obtém o elemento com o id “myid” e o armazena em uma variável chamada elem.

Depois de obter um objeto de elemento, você pode substituir seu HTML interno:

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

Por exemplo, se o seu código HTML for:

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

Após a injeção acima, o código HTML ficará assim:

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

Desafio

Fácil

Sua tarefa é injetar a tag h1 com o texto "Some text" dentro do elemento cujo id é igual a “container” (nosso contêiner de nuvem).

Adicione o novo código ao início do seu arquivo JavaScript, não apague nada do que você já fez.

Nota: Isso deve substituir o elemento de nuvem existente, não se preocupe, traremos a nuvem de volta na próxima lição.

Experimente você mesmo

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