Add diffNodes

front/diffNodes.js

+const diffNodes = (parentNode, newNodes) => {
+  const previousChildNumber = parentNode.childElementCount;
+  const newChildNumber = newNodes.length;
+  const previousChildren = parentNode.childNodes;
+  for (let index = 0; index < Math.min(previousChildNumber, newChildNumber); index += 1) {
+    parentNode.replaceChild(newNodes[index], previousChildren[index]);
+  }
+  for (
+    let index = Math.min(previousChildNumber, newChildNumber);
+    index < previousChildNumber;
+    index += 1
+  ) {
+    parentNode.removeChild(previousChildren[index]);
+  }
+  for (
+    let index = Math.min(previousChildNumber, newChildNumber);
+    index < newChildNumber;
+    index += 1
+  ) {
+    parentNode.appendChild(newNodes[index]);
+  }
+};
+
+export default diffNodes;

front/socket.js

 import jsonToHtmlArray from './display';
+import diffNodes from './diffNodes';
 
 const socketIO = io.connect('http://localhost:3000/');
 
@@ -22,7 +23,12 @@ socketIO.on('panel_data', (data) => {
     console.log(`Next call in ${data.ttl} milliseconds.`);
   }, data.ttl);
   const panelData = document.getElementById('panel_data');
-  jsonToHtmlArray(data).forEach(htmlElement => panelData.appendChild(htmlElement));
+  // console.log(panelData.childNodes);
+  // console.log(panelData.children);
+  // console.log(panelData.childElementCount);
+  diffNodes(panelData, jsonToHtmlArray(data));
+  // panelData.childNodes = jsonToHtmlArray(data);
+  // jsonToHtmlArray(data).forEach(htmlElement => panelData.appendChild(htmlElement));
 });
 
 socketIO.on('message', (data) => {