Вставка HTML через JS

Урок 15 из 18 курса Движущиеся облака — проект на HTML/CSS/JS на Coddy.

В следующих двух уроках мы добавим облака с помощью JavaScript!

Метод document.getElementById() возвращает объект элемента, представляющий элемент, свойство id которого совпадает с указанной строкой. Поскольку идентификаторы элементов должны быть уникальными, если они указаны, это удобный способ быстро получить доступ к конкретному элементу. Например:

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

В следующем примере извлекается элемент с идентификатором “myid” и сохраняется в переменной с именем elem.

После получения объекта элемента вы можете заменить его внутренний HTML-код:

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

Например, если ваш HTML-код выглядит так:

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

После вышеуказанной вставки HTML-код будет выглядеть следующим образом:

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

Задание

Легко

Ваша задача — вставить тег h1 с текстом "Some text" в элемент, чей id равен “container” (наш контейнер для облаков).

Добавьте новый код в начало вашего JavaScript-файла, не удаляйте ничего из того, что вы уже сделали.

Примечание: Это должно перезаписать существующий элемент облака, не волнуйтесь, мы вернем облако в следующем уроке.

Попробуйте сами

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