Правильный способ повторного использования блоков HTML и вставки динамического содержимого с помощью Javascript

Question

У меня есть сервер, который собирает данные из 10 источников и постоянно передает данные JSON на веб-страницу. Страница использует JSON.Parse, чтобы превратить его в объект widgetData. У объекта widgetData есть 10 свойств, которые я хочу отобразить в «виджете».

Итак, сервер нажимает WidgetData1, WidgetData2 и т. Д.

Для каждого widgetData я хочу создать / создать новый виджет и показать данные. Если существует widget1, обновите виджет. Кроме того, виджеты должны быть отсортированы по некоторому текстовому свойству (например, widgetdata.name).

Вот что я сделал до сих пор, но это не кажется таким надежным:

<script type="text/javascript">

        var properties = ["MachineID", "p1","p2,"p3","p4"];
        var currentWidget;
        function CreateBlock(widgetData)
        {

            var widgetID = widgetData.MachineID.replace(/ /g,"_");
            var myWidget = document.getElementById('widget-' + widgetID);
            if (myWidget == null)
            {
                CreateCard(widgetID);
            }

            var currentDate = new Date();
            var day = currentDate.getDay();
            var month = currentDate.getMonth(); //Be careful! January is 0 not 1
            var year = currentDate.getFullYear();
            var hour = currentDate.getHours();
            var min = currentDate.getMinutes();
            var sec = currentDate.getSeconds();

            var dateString = year + "-" + ZeroPad(month+1,2) + "-" + day + " " + ZeroPad(hour,2) + ":" + ZeroPad(min,2) + ":" + ZeroPad(sec,2);

            var data;
            for (let i = 0; i < properties.length; i++) 
            {
                data = widgetData[properties[i]];
                AddDataElement(widgetID,properties[i],data);
            }
            AddDataElement(widgetID,"Timestamp",dateString);

        }

        //create the card
        function CreateCard(cardID)
        {

            var parent 
            var newdiv
            var cardElement = document.createElement("div");
            cardElement.className = "card";
            cardElement.id = "widget-" + cardID; 
            cardElement.style = "height:500px;";
            parent=cardElement;

            newdiv = document.createElement("div");
            newdiv.className = "card-header";
            parent.appendChild(newdiv);
            //parent=newdiv;

            newdiv = document.createElement("div");
            newdiv.className = "card-body";
            newdiv.id = "cardbody";
            parent.appendChild(newdiv);
            parent=newdiv;

                newdiv = document.createElement("div");
                newdiv.className = "card-title";
                newdiv.id = "title";
                newdiv.textContent = "title";
                parent.appendChild(newdiv);

                newdiv = document.createElement("div");
                newdiv.className = "card-sub-title";
                newdiv.id = "subtitle";
                newdiv.textContent = "subtitle";
                parent.appendChild(newdiv);

                newdiv = document.createElement("div");
                parent.appendChild(newdiv);

            //last add to the parent div
            var parent = document.getElementById("Cards");
            parent.appendChild(cardElement);

        }


        //Add a data element
        function AddDataElement(machineID, title, value)
        {
            var cardElement = document.getElementById("widget-" + machineID);
            var cardElementBody = findChild("widget-" + machineID, "cardbody");
            var dataElement = findChild2(cardElementBody, title);
            if (dataElement == null)
            {
                dataElement = document.createElement("div");
                dataElement.id = title;
                dataElement.className = "card-item";
            }

            dataElement.innerText = title + ": " + value;
            cardElementBody.appendChild(dataElement);
        }


        function CreateElement(parentDivObject, childName)
        {
            var dataElement = document.createElement('DIV');
            dataElement.id = childName;
            dataElement.textContent = childName;
            parentDivObject.appendChild(dataElement);
        }

        function findChild(idOfElement, idOfChild)
        {
            let element = document.getElementById(idOfElement);
            return element.querySelector('[id=' + idOfChild + ']');
        }

        function findChild2(parentElement, idOfChild)
        {
            //let element = document.getElementById(idOfElement);
            return parentElement.querySelector('[id=' + idOfChild + ']');
        }

        function ZeroPad(num, places)
        {
            var zero = places - num.toString().length + 1;
            return Array(+(zero > 0 && zero)).join("0") + num;
        }


    </script> 

    <script type="text/javascript">
        var widgetList = new Set(); //hold list of widgets

        var start = function () {
            var inc = document.getElementById('incomming');
            var wsImpl = window.WebSocket || window.MozWebSocket;
            var form = document.getElementById('sendForm');
            var input = document.getElementById('sendText');

            inc.innerHTML += "connecting to server ..<br/>";
            // create a new websocket and connect
            window.ws = new wsImpl('ws://localhost:8181/');

            //when data is comming from the server, this method is called
            //ws.onmessage = function (evt) {
            //    inc.innerHTML += evt.data + '<br/>';
            //};

            ws.onmessage = function (evt)
            {
                var machineStatus = JSON.parse(evt.data);
                if (!widgetList.has(machineStatus.MachineID))
                {
                    widgetList.add(machineStatus.MachineID)
                }
                CreateBlock(machineStatus)


            }

            // when the connection is established, this method is called
            ws.onopen = function () {
                inc.innerHTML += '.. connection open<br/>';
            };
            // when the connection is closed, this method is called
            ws.onclose = function () {
                inc.innerHTML += '.. connection closed<br/>';
            }


            form.addEventListener('submit', function(e){
                e.preventDefault();
                var val = input.value;
                ws.send(val);
                input.value = "";
            });

        }
        window.onload = start;
    </script>

Каков альтернативный, правильный способ или наилучшая практика для достижения этой цели?