HTML mit JS einfügen

Lektion 15 von 18 im Kurs Ziehende Wolken – HTML/CSS/JS-Projekt von Coddy.

In den nächsten zwei Lektionen werden wir die Wolken mit JavaScript einfügen!

Die Methode document.getElementById() gibt ein Element-Objekt zurück, das das Element repräsentiert, dessen Eigenschaft id mit der angegebenen Zeichenfolge übereinstimmt. Da Element-IDs, sofern angegeben, eindeutig sein müssen, sind sie eine nützliche Methode, um schnell auf ein bestimmtes Element zuzugreifen. Zum Beispiel:

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

Das folgende Beispiel ruft das Element mit der ID “myid” ab und speichert es in einer Variablen namens elem.

Nachdem Sie ein Element-Objekt erhalten haben, können Sie dessen inneres HTML ersetzen:

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

Wenn Ihr HTML-Code zum Beispiel so aussieht:

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

Nach der obigen Einfügung sieht der HTML-Code wie folgt aus:

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

Aufgabe

Einfach

Ihre Aufgabe ist es, das h1-Tag mit dem Text "Some text" in das Element einzufügen, dessen id gleich “container” ist (unser Cloud-Container).

Fügen Sie den neuen Code am Anfang Ihrer JavaScript-Datei hinzu; löschen Sie nichts von dem, was Sie bereits getan haben.

Hinweis: Es sollte das vorhandene Cloud-Element überschreiben. Keine Sorge, wir werden die Cloud in der nächsten Lektion zurückholen.

Probier es selbst

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