Wstawianie HTML za pomocą JS

Lekcja 15 z 18 w kursie Poruszające się chmury — projekt HTML/CSS/JS w Coddy.

W dwóch kolejnych lekcjach wstrzykniemy chmury za pomocą JavaScript!

Metoda document.getElementById() zwraca obiekt elementu reprezentujący element, którego właściwość id jest zgodna z określonym ciągiem znaków. Ponieważ identyfikatory elementów, jeśli zostały określone, muszą być unikalne, są przydatnym sposobem na szybkie uzyskanie dostępu do konkretnego elementu. Na przykład:

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

Poniższy przykład pobiera element o identyfikatorze “myid” i zapisuje go w zmiennej o nazwie elem.

Po uzyskaniu obiektu elementu możesz zastąpić jego wewnętrzny kod HTML:

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

Na przykład, jeśli Twój kod HTML wygląda tak:

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

Po powyższym wstrzyknięciu kod HTML będzie wyglądać tak:

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

Wyzwanie

Łatwy

Twoim zadaniem jest wstawić znacznik h1 z tekstem "Some text" do elementu, którego id jest równe “container” (naszego kontenera chmury).

Dodaj nowy kod na początku pliku JavaScript, nie usuwaj niczego, co już zostało zrobione.

Uwaga: powinien on zastąpić istniejący element chmury. Nie martw się, przywrócimy chmurę w następnej lekcji.

Spróbuj swoich sił

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Wpisz tutaj kod HTML -->
        <script src="script.js"></script>
    </body>
</html>