Отрисовка html-вёрстки средствами JavaScript

Сейчас для разработки фронтенда очень часто используют всевозможные JavaScript фреймворки.
Суть их в том, что вёрстка генерируется средствами JavaScript, а не вручную прописывается разработчиком.
То есть скажем для отрисовки списка не нужно прописывать тэги li, а нужно лишь передать массив со значениями пунктов в определённую функцию и разметка будет отрисована.
Если вы не представляете как можно создать html-страницу без использования html - читайте дальше.
Я разберу данный подход на примере создания таблицы.
Таблица будет примитивная, и совсем-совсем как настоящая:)
Вначале создадим на странице контейнер, в котором будет отрисовывать таблицу:

<div id="root"></div>

Ну и сама функция:

function createTable(container, cols, rows){
    //создание таблицы
    var table = document.createElement('table');
    
    for(var i = 0; i < rows; i++){
        var tr = document.createElement('tr');
        
        for(var j = 0; j < cols; j++){
            var td = document.createElement('td');
            //добавление в строку ячейки
            tr.appendChild(td);
        }

        //добавление в таблицу строки
        table.appendChild(tr);

    }
    //добавление таблицы в родительский контейнер
    root.appendChild(table);
}

Я оставил комментарии возле ключевых строк.
Вызывать функцию следует так:

var root = document.querySelector('#root')
createTable(root, 10, 5);

В переменную root я положил указатель на контейнер.
Числа 10 и 5 - это количество столбцов и строк в таблице. ВЫ можете указать любые цифры.

Ну и чтобы таблицу можно было "посмотреть" - добавим стили:

table td{
  border:1px solid black;
  padding:10px;
}
table td:hover{
  background:red;
  cursor:pointer;
}

Усложняя данный код можно манипулировать атрибутами тэгов таблицы и т.п. Но суть остаётся прежней - при помощи JavaScript можно управлять DOM-деревом в браузере.

Посмотреть как это работает вы можете по ссылке https://codepen.io/tristamoff/pen/gKbrVG
Материал подготовлен автором @tristamoff