Inserire HTML usando JS

Lezione 15 di 18 del corso Nuvole in movimento - Progetto HTML/CSS/JS di Coddy.

Nelle prossime due lezioni, inseriremo le nuvole usando JavaScript!

Il metodo document.getElementById() restituisce un oggetto elemento che rappresenta l'elemento la cui proprietà id corrisponde alla stringa specificata. Poiché gli ID degli elementi devono essere univoci, se specificati, sono un modo utile per accedere rapidamente a un elemento specifico. Per esempio:

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

L'esempio seguente recupera l'elemento con id “myid” e lo memorizza in una variabile chiamata elem.

Dopo aver recuperato un oggetto elemento, puoi sostituire il suo HTML interno:

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

Per esempio, se il tuo codice HTML è:

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

Dopo l'inserimento precedente, il codice HTML apparirà così:

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

Sfida

Facile

Il tuo compito è inserire il tag h1 con il testo "Some text" nell'elemento il cui id è uguale a “container” (il nostro contenitore della nuvola).

Aggiungi il nuovo codice all'inizio del tuo file JavaScript, non eliminare nulla di ciò che hai già fatto.

Nota: dovrebbe sovrascrivere l'elemento della nuvola esistente; non preoccuparti, ripristineremo la nuvola nella prossima lezione.

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Scrivi qui il codice HTML -->
        <script src="script.js"></script>
    </body>
</html>