Поехали!
Создание элементов
Для интерактивных сайтов и приложений динамическое создание HTML-элементов и помещение их в DOM — вполне обыденная процедура. Если вы впервые слышите о том, что такое возможно, то этот раздел точно вам понравится!
Создавать элементы можно с помощью метода createElement, который работает достаточно просто. Он вызывается через объект document, и ему передается имя HTML-тега элемента, который нужно создать. В следующем фрагменте кода создается элемент абзаца, представленный буквой p:
let myElement = document.createElement("p");
Переменная myElement содержит ссылку на только что созданный элемент.
Если мы запустим приложение, добавив эту строку, то при своем выполнении она создаст элемент p. Создание элемента — это простая часть. Усилия придется приложить, чтобы сделать его веселым и ответственным членом нашей DOM. Требуется поместить этот элемент в определенное место DOM, и пока что наш динамически созданный элемент p где-то совершенно бесцельно блуждает:
Причина в том, что DOM не знает о существовании этого элемента, и, чтобы он стал полноценной частью DOM, нужно сделать две вещи:
1. Найти элемент, который выступит в качестве его родителя.
2. Использовать appendChild и присоединить элемент к этому родителю.
Легче всего это будет понять на примере, который все объединяет. Если вы хотите проработать это самостоятельно, то создайте HTML-документ и добавьте в него следующий код HTML, CSS и JS:
<!DOCTYPE html>
<html>
<head>
<title>Creating Elements</title>
<style>
body {
background-color: #0E454C;
padding: 30px;
}
h1 {
color: #14FFF7;
font-size: 72px;
font-family: sans-serif;
text-decoration: underline;
}
p {
color: #14FFF7;
font-family: sans-serif;
font-size: 36px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Am I real?</h1>
<script>
let newElement = document.createElement("p");
let bodyElement = document.querySelector("body");
newElement.textContent = "Or do I exist entirely in your
imagination?";
bodyElement.appendChild(newElement);
</script>
</body>
</html>
Сохраните файл и просмотрите его в браузере. Если все сработало, то вы увидите что-то похожее на следующий скриншот:
Отступим на шаг назад и разберем этот пример подробней. Все, что нам нужно для создания элемента и его добавления в DOM, находится между тегами script:
let newElement = document.createElement("p");
let bodyElement = document.querySelector("body");
newElement.textContent = "Or do I exist entirely in your
imagination?";
bodyElement.appendChild(newElement);
newElement хранит ссылку на наш созданный тег p. В bodyElement хранится ссылка на элемент body. В только что созданном элементе (newElement) мы устанавливаем свойство textContent, указав, что в итоге нужно отобразить.
В конце мы берем бесцельно блуждающий newElement и присоединяем его к элементу-родителю body с помощью функции appendChild.
На рис. 29.1 показано, как выглядит DOM для нашего простого примера.
Рис. 29.1. Как выглядит DOM после выполнения приведенного кода
Следует учитывать, что функция appendChild всегда добавляет элемент после всех потомков, которые могут быть у родителя. В нашем случае элемент body уже имеет в качестве потомков элементы h1 и script. Элемент p присоединяется после них как самый новый. В итоге появлятся контроль над позицией, в которой будет размещен конкретный элемент под родителем.
Если мы хотим вставить newElement сразу после тега h1, то можем сделать это, вызвав функцию insertBefore для родителя. Функция insertBefore получает два аргумента. Первый из них является элементом-вставкой, а второй — ссылкой на брата (то есть другого потомка родителя), которому этот элемент должен предшествовать. Далее приведен измененный пример, где наш newElement помещен после элемента h1 (и перед элементом script):
let newElement = document.createElement("p");
let bodyElement = document.querySelector("body");
let scriptElement = document.querySelector("script");
newElement.textContent = "I exist entirely in your imagination.";
bodyElement.insertBefore(newElement, scriptElement);
Обратите внимание, что мы вызываем insertBefore для bodyElement и указываем, что newElement должен быть вставлен перед элементом script. Наша DOM в этом случае будет выглядеть так, как показано рис. 29.2.
