Resolve code scanning warning about HTML injection (#953)

## Description:

Resolve code scanning warning about HTML injection with copilot
suggested fix.

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

Co-authored-by: Scott Anderson <662325+scottanderson@users.noreply.github.com>

src/client/graphics/layers/NameLayer.ts

@@ -221,10 +221,19 @@ export class NameLayer implements Layer {
     shieldDiv.style.display = "flex";
     shieldDiv.style.alignItems = "center";
     shieldDiv.style.gap = "0px";
-    shieldDiv.innerHTML = `
-      <img src="${this.shieldIconImage.src}" style="width: 16px; height: 16px;" />
-      <span style="color: black; font-size: 10px; margin-top: -2px;">0</span>
-    `;
+    const shieldImg = document.createElement("img");
+    shieldImg.src = this.shieldIconImage.src;
+    shieldImg.style.width = "16px";
+    shieldImg.style.height = "16px";
+
+    const shieldSpan = document.createElement("span");
+    shieldSpan.textContent = "0";
+    shieldSpan.style.color = "black";
+    shieldSpan.style.fontSize = "10px";
+    shieldSpan.style.marginTop = "-2px";
+
+    shieldDiv.appendChild(shieldImg);
+    shieldDiv.appendChild(shieldSpan);
     element.appendChild(shieldDiv);
 
     // Start off invisible so it doesn't flash at 0,0