Merge PR mebjas#821 from upstream

Author: mokalovesoulmate

src/html5-qrcode-scanner.ts

@@ -270,7 +270,7 @@ export class Html5QrcodeScanner {
         if (!container) {
             throw `HTML Element with id=${this.elementId} not found`;
         }
-        container.innerHTML = "";
+        container.textContent = "";
         this.createBasicLayout(container!);
         this.html5Qrcode = new Html5Qrcode(
             this.getScanRegionId(),
@@ -334,7 +334,7 @@ export class Html5QrcodeScanner {
         const emptyHtmlContainer = () => {
             const mainContainer = document.getElementById(this.elementId);
             if (mainContainer) {
-                mainContainer.innerHTML = "";
+                mainContainer.textContent = "";
                 this.resetBasicLayout(mainContainer);
             }
         }
@@ -1044,15 +1044,15 @@ export class Html5QrcodeScanner {
             this.getScanRegionId())!;
 
         if (this.cameraScanImage) {
-            qrCodeScanRegion.innerHTML = "<br>";
-            qrCodeScanRegion.appendChild(this.cameraScanImage);
+            const br = document.createElement("br");
+            qrCodeScanRegion.replaceChildren(br, this.cameraScanImage);
             return;
         }
 
         this.cameraScanImage = new Image;
         this.cameraScanImage.onload = (_) => {
-            qrCodeScanRegion.innerHTML = "<br>";
-            qrCodeScanRegion.appendChild($this.cameraScanImage!);
+            const br = document.createElement("br");
+            qrCodeScanRegion.replaceChildren(br, $this.cameraScanImage!);
         }
         this.cameraScanImage.width = 64;
         this.cameraScanImage.style.opacity = "0.8";
@@ -1066,15 +1066,15 @@ export class Html5QrcodeScanner {
             this.getScanRegionId())!;
 
         if (this.fileScanImage) {
-            qrCodeScanRegion.innerHTML = "<br>";
-            qrCodeScanRegion.appendChild(this.fileScanImage);
+            const br = document.createElement("br");
+            qrCodeScanRegion.replaceChildren(br, this.fileScanImage);
             return;
         }
 
         this.fileScanImage = new Image;
         this.fileScanImage.onload = (_) => {
-            qrCodeScanRegion.innerHTML = "<br>";
-            qrCodeScanRegion.appendChild($this.fileScanImage!);
+            const br = document.createElement("br");
+            qrCodeScanRegion.replaceChildren(br, $this.fileScanImage!);
         }
         this.fileScanImage.width = 64;
         this.fileScanImage.style.opacity = "0.8";
@@ -1085,7 +1085,7 @@ export class Html5QrcodeScanner {
     private clearScanRegion() {
         const qrCodeScanRegion = document.getElementById(
             this.getScanRegionId())!;
-        qrCodeScanRegion.innerHTML = "";
+        qrCodeScanRegion.textContent = "";
     }
 
     //#region state getters

src/html5-qrcode.ts

@@ -1464,7 +1464,7 @@ export class Html5Qrcode {
         }
         const element = document.getElementById(this.elementId);
         if (element) {
-            element.innerHTML = "";
+            element.textContent = "";
         }
     }
 

tests/ui/scanner/camera-selection-ui.test.ts

@@ -22,7 +22,7 @@ describe("CameraSelectionUi#create()", () => {
 
     after(() => {
         document.body.removeChild(parentElement!);
-        parentElement!.innerHTML = "";
+        parentElement!.textContent = "";
         parentElement = undefined;
     });
 
@@ -40,7 +40,7 @@ describe("CameraSelectionUi#create()", () => {
     });
 
     it("Single cameras, creates the camera selection", () => {
-        parentElement!.innerHTML = "";
+        parentElement!.textContent = "";
         let numCameras = 1;
         let cameras = createCameraList(numCameras);
         let cameraSelectUi = CameraSelectionUi.create(parentElement!, cameras);
@@ -58,7 +58,7 @@ describe("CameraSelectionUi#create()", () => {
         let cameras = createCameraList(numCameras);
         expect(() => {
             let _ = CameraSelectionUi.create(parentElement!, cameras);
-        }).to.throw();   
+        }).to.throw();
     });
 });
 
@@ -72,7 +72,7 @@ describe("CameraSelectionUi#enable() & disable()", () => {
 
     after(() => {
         document.body.removeChild(parentElement!);
-        parentElement!.innerHTML = "";
+        parentElement!.textContent = "";
         parentElement = undefined;
     });
 
@@ -113,7 +113,7 @@ describe("CameraSelectionUi setting and getting values", () => {
 
     after(() => {
         document.body.removeChild(parentElement!);
-        parentElement!.innerHTML = "";
+        parentElement!.textContent = "";
         parentElement = undefined;
     });