Генерация элемента на чистом JS

Сегодня будем создавать программно html-элемент через javascript. По созданию элементов в сети есть превеликое множество мануалов. Данное руководство — просто шпаргалка:

Чтобы создать элемент управления пишем:

var div = document.createElement('div');

Мы создали элемент, но не видим его, поскольку он не добавлен в DOM. Чтобы его увидеть, надо привязать его к какому-то существующему элементу одним из следующих методов: appendChild либо insertBefore — как вы, наверное, правильно поняли из их названий они соответственно либо добавят элемент в список дочерних элементов текущего элемента либо вставит после текущего элемента.

Воспользуемся appendChild. Итого:

var div = document.createElement('div');
div.innerHTML = 'Привет, мир!';
var container = document.getElementById('parent');
container.appendChild(div);

appendChildдобавит элемент последним в список дочерних элементов контейнера. Теперь мы можем его лицезреть.

Полезное по теме