Improve section layout (get rid of innerHTML)

diff --git a/web/controlpi-debug.js b/web/controlpi-debug.js
index 9e8b53c85d4d824526dead228ab1cd2d03174a1f..110558318e969388766f9bf09d6ebf7c3d705674 100644 (file)
--- a/web/controlpi-debug.js
+++ b/web/controlpi-debug.js
@@ -3,21 +3,33 @@ function createForClient(client) {
     const section = document.createElement('section')
     section.setAttribute('id', client)
     section.setAttribute('class', 'client')
-    section.innerHTML = `
-        <h2>${client}</h2>
-        <div class="interfacecontainer">
-            <h3>=&gt;</h3>
-            <div id="${client} Receives" class="templatecontainer">
-            </div>
-        </div>
-        <div class="interfacecontainer">
-            <h3>&lt;=</h3>
-            <div id="${client} Sends" class="templatecontainer">
-            </div>
-        </div>
-        <div id="${client} Last" class="lastcontainer">
-        </div>
-    `
+    const heading = document.createElement('h2')
+    heading.appendChild(document.createTextNode(client))
+    section.appendChild(heading)
+    const receiveOuter = document.createElement('div')
+    receiveOuter.setAttribute('class', 'interfacecontainer')
+    const receiveHeading = document.createElement('h3')
+    receiveHeading.appendChild(document.createTextNode('=>'))
+    receiveOuter.appendChild(receiveHeading)
+    const receiveInner = document.createElement('div')
+    receiveInner.setAttribute('id', client + ' Receives')
+    receiveInner.setAttribute('class', 'templatecontainer')
+    receiveOuter.appendChild(receiveInner)
+    section.appendChild(receiveOuter)
+    const sendOuter = document.createElement('div')
+    sendOuter.setAttribute('class', 'interfacecontainer')
+    const sendHeading = document.createElement('h3')
+    sendHeading.appendChild(document.createTextNode('<='))
+    sendOuter.appendChild(sendHeading)
+    const sendInner = document.createElement('div')
+    sendInner.setAttribute('id', client + ' Sends')
+    sendInner.setAttribute('class', 'templatecontainer')
+    sendOuter.appendChild(sendInner)
+    section.appendChild(sendOuter)
+    const last = document.createElement('div')
+    last.setAttribute('id', client + ' Last')
+    last.setAttribute('class', 'lastcontainer')
+    section.appendChild(last)
     return section
 }