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