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

Question

[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);
        }
    })

Это вообще правильно или по другому нельзя? Или если можно то как?
В советах прошу учесть, что это нода и экспресс.

Comments

[Yustas Alexu]

По-моему это браузерный DOM, при чем тут нода и экспресс?

[Yustas Alexu]

Самое простое в вашем случае это использовать jQuery. А вообще для создания таблиц есть небольшие библиотеки на js.

[Yustas Alexu]

Вот например: json-table.kganser.com . У него же есть библиотечка для создания элементов DOM jsml.kganser.com

[Kovalsky]

Я тоже дурачок, не вижу здесь ноды. Нода это сервер, отдаёт HTML. HTML - это текст. Просто создавайте строки, будет в сто раз короче и быстрей.

Answer 1

[Alex Zeit]

Шаблонизация в client-side JavaScript. Как лучше организовать в данном случае?

Answer 2

[Николай]

Страх какой.
Используйте template и DocumentFragment
По крайней мере с точки зрения производительности (да и читабельности) выиграете.