Добавляем HTML через JS

Как добавить HTML тег через JS

Зачастую требуется добавить какой-то html тег через javascript, при нажатии кнопки или вызове функции, но сейчас не об этом. Сегодня мы рассмотрим как вывести статический элемент при помощи js. Поехали :)

Для начала мы объявим перменную и добавим необходимый html тег, вот таким вот образом:

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

Добавляем любой текст для нашего элемента:

div.innerHTML = "Привет! Это div вставленный через JS";

Далее нам необходимо определиться куда мы будем вставлять новый элемент, я же создал пустой div с классом append, и тут сразу назревает вопрос: А почему бы не добавить через класс необходимый текст и т.п. - да это был бы лучший вариант, но сейчас мы рассматриваем конкретно вставку нового элемента:


        let newDiv = document.querySelector('.append');
        // Задали новую переменную и совершили поиск нашего div с классом append

Теперь нам необходимо вывести созданный элемент div в необходимое место:

newDiv.append(div);

Почему я сделал именно так, а не использовал как описано в учебниках ответ прост:
Что бы конкретно на примере понять как происходит вставка элемента через JavaScript в необходимое место, а не в конец body как обычно это преподносят в статьях и учебниках document.body.append(div);
Полный же код выглядит так:


    let div = document.createElement('div'),
newDiv = document.querySelector('.append');
div.innerHTML = "Привет! Это div вставленный через JS";
newDiv.append(div);