Добавление элемента на страницу проходит в 2 этапа:
1. Определяем, что нужно добавить;
2. Определяем куда это добавить.
Для создания элемента используется метод document.createElement (tag), пример:
Теперь создадим элемент, присвоим ему метку (класс) и заполним текстом:
Теперь у нас есть готовый DOM-элемент, который присвоен переменной div, но пока не виден, так как никак не связан со страницей.
Для того, чтобы DOM-узел был показан на странице, его необходимо вставить в document. Это можно сделать с помозью функций appendChild и insertBefore. Разница между ними в том, что первый вставляет элемент после всех дочерних элементов, а второй – перед указанным дочерним элементом.
Синтаксис:
Добавляет elem в конец дочерних элементов parentElem.
Вставляет elem в коллекцию детей parentElem перед nextSibling.
Пример:
Для того, чтобы вставить элемент в начало, можно просто использовать x1.firstChild.
