Injecter du HTML avec JS

Leçon 15 sur 18 du cours Nuages en mouvement - Projet HTML/CSS/JS de Coddy.

Dans les deux prochaines leçons, nous injecterons les nuages en utilisant JavaScript !

La méthode document.getElementById() renvoie un objet élément représentant l'élément dont la propriété id correspond à la chaîne spécifiée. Comme les identifiants d'élément doivent être uniques s'ils sont spécifiés, ils constituent un moyen utile d'accéder rapidement à un élément spécifique. Par exemple :

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

L'exemple suivant récupère l'élément avec l'identifiant “myid” et le stocke dans une variable appelée elem.

Après avoir obtenu un objet élément, vous pouvez remplacer son HTML interne :

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

Par exemple, si votre code HTML est :

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

Après l'injection ci-dessus, le code HTML ressemblera à ceci :

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

Défi

Facile

Votre tâche consiste à injecter la balise h1 avec le texte "Some text" dans l'élément dont l'id est égal à “container” (notre conteneur de nuages).

Ajoutez le nouveau code au début de votre fichier JavaScript, ne supprimez rien de ce que vous avez déjà fait.

Note : Cela devrait écraser l'élément de nuage existant, ne vous inquiétez pas, nous récupérerons le nuage dans la prochaine leçon.

Essayez vous-même

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