@de1m

Как можно легче создавать элементы?

Есть такой вопрос. Я пишу небольшую програмку при помощи node.js, express и socket.io.
Я через socket.io получаю данные и хочу их в нескольких таблицах отобразить (пока только пример), но мне не нравится, что мне приходится писать столько Javascript'a и я не совсем уверен, что это правильный путь. Выглядит примерно вот так:
socket.on("settings-loaded", function (data) {
        document.getElementById('load').style.display = "none";
        var maincon = document.getElementById('maincon');
        for (var i = 0; i < data.length; i++) {
            var elementBody = document.createElement('div');
            elementBody.className = 'panel panel-default col-lg-4 paddingRL0';
            var elementHeader = document.createElement('div')
            elementHeader.className = 'panel-heading';
            elementHeader.appendChild(document.createTextNode("Name: " + data[i].id))
            var elementContent = document.createElement('div');
            elementContent.className = 'panel-body';
            
            var eleTable = document.createElement('table');
            eleTable.className = 'table marginB0';
            
            var eleTr = document.createElement('tr');
            var eleTdName = document.createElement('td');
            eleTdName.appendChild(document.createTextNode("Name"));
            var eleTdValue = document.createElement('td');
            eleTdValue.appendChild(document.createTextNode("2m000M234"));
            eleTdValue.className = 'editable';

            var eleTr2 = document.createElement('tr');
            var eleTdName2 = document.createElement('td');
            eleTdName2.appendChild(document.createTextNode("Name"));
            var eleTdValue2 = document.createElement('td');
            eleTdValue2.appendChild(document.createTextNode("2m000M234"));
            eleTdValue2.className = 'editable';
            

            eleTr.appendChild(eleTdName);
            eleTr2.appendChild(eleTdName2);
            eleTr.appendChild(eleTdValue);
            eleTr2.appendChild(eleTdValue2);
            eleTable.appendChild(eleTr);
            eleTable.appendChild(eleTr2);
            elementContent.appendChild(eleTable);
            elementBody.appendChild(elementHeader);
            elementBody.appendChild(elementContent);
            maincon.appendChild(elementBody);
        }
    })


Это вообще правильно или по другому нельзя? Или если можно то как?
В советах прошу учесть, что это нода и экспресс.
  • Вопрос задан
  • 237 просмотров
Пригласить эксперта
Ответы на вопрос 2
Страх какой.
Используйте template и DocumentFragment
По крайней мере с точки зрения производительности (да и читабельности) выиграете.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
deeplay Новосибирск
До 300 000 ₽
от 150 000 до 300 000 ₽
SPORA Москва
от 180 000 до 250 000 ₽