Eliminate innerHTML manipulation

Construct DOM nodes directly instead of trying to sanitize every input
string and dynamically updating HTML.

Replace all uses of innerHTML with textContent, replaceChildren, and
appendChild.

This removes the need to use safeTags and replace newlines, but now
requires preserving whitespace via CSS pre-wrap.

Every OOC chat line is now placed into its own element instead of simply
being appended to the log. This might be worse, and createTextNode
is another alternative.

3 files changed, 3 insertions, 3 deletions

diff --git a/webAO/dom/changeCharacter.ts b/webAO/dom/changeCharacter.ts
index abf6f71e..586b1446 100644
--- a/webAO/dom/changeCharacter.ts
+++ b/webAO/dom/changeCharacter.ts
@@ -5,6 +5,6 @@
 export function changeCharacter(_event: Event) {
   document.getElementById("client_waiting")!.style.display = "block";
   document.getElementById("client_charselect")!.style.display = "block";
-  document.getElementById("client_emo")!.innerHTML = "";
+  document.getElementById("client_emo")!.replaceChildren();
 }
 window.changeCharacter = changeCharacter;
diff --git a/webAO/dom/musicListFilter.ts b/webAO/dom/musicListFilter.ts
index b0a8c3ba..ce6b2f67 100644
--- a/webAO/dom/musicListFilter.ts
+++ b/webAO/dom/musicListFilter.ts
@@ -11,7 +11,7 @@ export function musiclist_filter(_event: Event) {
     document.getElementById("client_musicsearch")
   )).value;
 
-  musiclist_element.innerHTML = "";
+  musiclist_element.replaceChildren();
 
   for (const trackname of client.musics) {
     if (trackname.toLowerCase().indexOf(searchname.toLowerCase()) !== -1) {
diff --git a/webAO/dom/renderPlayerList.ts b/webAO/dom/renderPlayerList.ts
index c238f28b..6c696acc 100644
--- a/webAO/dom/renderPlayerList.ts
+++ b/webAO/dom/renderPlayerList.ts
@@ -3,7 +3,7 @@ import { AO_HOST } from "../client/aoHost";
 
 export function renderPlayerList() {
   const list = document.getElementById("client_playerlist") as HTMLTableElement;
-  list.innerHTML = "";
+  list.replaceChildren();
 
   const header = list.createTHead().insertRow();
   for (const label of ["Icon", "Character", "Showname", "OOC Name"]) {