使用Javascript重新使用HTML块和插入动态内容的正确方法

我有一个服务器，它从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>

变量属性=[“机器ID”、“p1”、“p2”、“p3”、“p4”]；
var-currentWidget；
函数CreateBlock（widgetData）
{
var widgetID=widgetData.MachineID.replace（//g，“”）；
var myWidget=document.getElementById（'widget-'+widgetID）；
if（myWidget==null）
{
创建卡（widgetID）；
}
var currentDate=新日期（）；
var day=currentDate.getDay（）；
var month=currentDate.getMonth（）；//小心！一月是0而不是1
var year=currentDate.getFullYear（）；
var hour=currentDate.getHours（）；
var min=currentDate.getMinutes（）；
var sec=currentDate.getSeconds（）；
var dateString=year+“-”+ZeroPad（月+1,2）+“-”+day+”+ZeroPad（小时，2）+“：”+ZeroPad（分钟，2）+“：”+ZeroPad（秒，2）；
var数据；
for（设i=0；i0&&0））.join（“0”）+num；
}
var widgetList=new Set（）；//保留小部件列表
var start=函数（）{
var inc=document.getElementById（'incomming'）；
var wsImpl=window.WebSocket | | window.MozWebSocket；
var form=document.getElementById（'sendForm'）；
var input=document.getElementById（'sendText'）；
inc.innerHTML+=“连接到服务器..
”；
//创建新的websocket并连接
window.ws=newwsimpl（'ws://localhost:8181/'）；
//当从服务器提交数据时，调用此方法
//ws.onmessage=函数（evt）{
//inc.innerHTML+=evt.data+'
'；
//};
ws.onmessage=函数（evt）
{
var machineStatus=JSON.parse（evt.data）；
如果（！widgetList.has（machineStatus.MachineID））
{
添加（machineStatus.MachineID）
}
CreateBlock（machineStatus）
}