Давайте теперь поговорим о создании элемента. Страницы становятся все более интерактивными, и все больше элементов на них появляется динамически в зависимости от каких-то действий пользователя. Мы заполняем логин и пароль и пытаемся отправить форму и хотим получить сразу же ответ, правильно ли мы ее заполнили. Мы регистрируемся на сайте, указываем логин и хотим, чтобы проверка на то, является ли он валидным, произошла сразу. И при всех этих действиях необходимо сообщать пользователю о том, какой результат получился: правильно ли он заполнил поля, были ли какие-то ошибки. И для этого очень удобно создавать элементы динамически. Мы получили ответ от сервера, отрисовали элемент, наполнили его текстом и таким образом сообщили пользователю о том, что произошло. Для этого существует несколько методов. Прежде всего, это метод createElement, который, собственно говоря, отвечает за создание элемента, и метод appendChild, который добавляет элемент внутрь нашей страницы. Итак, сначала мы создаем элемент span с помощью createElement, наделяем этот элемент свойствами, прописываем ему атрибуты, устанавливаем ему значение текста и вообще конфигурируем наш элемент. Важно понимать: созданный элемент находится в памяти и не находится внутри тела страницы. Пока это просто какой-то объект, который мы сконфигурировали и который пока с нашим DOM-деревом никак не связан. Для того, чтобы эту связь сделать, необходимо добавить элемент в нашу страницу. И, собственно, appendChild — он ровно про это. С помощью него мы можем добавить наш элемент к любому другому, как вложенный новый дочерний элемент. В нашем случае мы добавляем созданный и отконфигурированный span последним элементом к тегу body, то есть добавляем в самый конец страницы. При создании нового DOM-элемента нам далеко не всегда нужно создавать его с нуля. Очень часто нам подходит такой способ: взять за основу уже существующий, который есть на странице, скопировать его и поменять в нем какие-то свойства. Для этого существует метод cloneNode, который принимает в качестве необязательного параметра true или false. False — это значение по умолчанию, а если мы передадим true, то все дочерние элементы внутри нашего элемента, который мы хотим склонировать, будут скопированы: их атрибуты, свойства, события, которые на них обрабатываются, о чем мы поговорим чуть позже. Все это будет помещено во вновь созданный склонированный объект. И после этого мы можем так же, как у любого другого элемента, у этой копии поменять атрибуты и свойства, это никоим образом не повлияет на родительский элемент, с которого мы сняли снимок, и с помощью метода appendChild также добавить его на страницу. Методов для работы с созданием элементов чуть больше, чем я рассказал, но в основном они про позиционирование новых элементов и то, куда вставить их в рамках HTML-дерева. Вставить их, как соседей слева или справа, заменить существующий элемент другим, вновь созданным, вставить элемент выше текущего, то есть сделать его родителем, и т. п. Более подробно вы можете ознакомиться с методами по ссылкам на документацию.
