What is the easiest way to create elements?

Question

Node.js

There is such a question. I am writing a small program using node.js, express and socket.io.
I receive data via socket.io and want to display it in several tables (so far only an example), but I don't like that I have to write so much Javascript and I'm not entirely sure that this is the right way. Looks like this:

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

Is this correct or is there no other way? Or if possible, how?
In the advice, please take into account that this is a node and an express.

Answer 1

Templates in client-side JavaScript. What is the best way to organize in this case?

Answer 2

What fear.
Use template and DocumentFragment
At least in terms of performance (and readability) win.