From bf884ac39c89c507819b84151fbe13ff41043354 Mon Sep 17 00:00:00 2001
From: clerie <git@clerie.de>
Date: Wed, 16 Sep 2020 14:53:04 +0200
Subject: [PATCH] Replace innerHTML hack with proper DOM manipulation

---
 js/reiseauskunft.js | 35 +++++++++++++++++++++++++++++++----
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/js/reiseauskunft.js b/js/reiseauskunft.js
index f0fc779..d0985d8 100644
--- a/js/reiseauskunft.js
+++ b/js/reiseauskunft.js
@@ -32,6 +32,31 @@ function bahnParseTrainName(dirty_train_name) {
   return dirty_train_name;
 }
 
+function domCreateLink(href) {
+  var link = document.createElement("a");
+  link.setAttribute("href", href);
+  return link;
+}
+
+function domCreateImage(src) {
+  var image = document.createElement("img");
+  image.setAttribute("src", src);
+  return image;
+}
+
+function domCreateButton(href, image_src) {
+  var link = domCreateLink(href);
+  var image = domCreateImage(image_src);
+  image.setAttribute("style", "height: 2em; vertical-align:middle;")
+  link.append(image);
+  return link;
+}
+
+function domCreateButtonMarudor(path) {
+  var button = domCreateButton("https://marudor.de" + path, getMediaURL("marudor.svg"));
+  return button;
+}
+
 var connection_result_observer = new MutationObserver((mutations) => {
   mutations.forEach((mutation) => {
     if (mutation.type === 'childList') {
@@ -43,9 +68,10 @@ var connection_result_observer = new MutationObserver((mutations) => {
         trains.forEach((train) => {
           var train_names = train.querySelectorAll("span a");
           train_names.forEach((train_name) => {
-            train_name = bahnParseTrainName(train_name.innerText);
-            if(typeof train_name !== 'undefined') {
-              train.innerHTML = train.innerHTML + ' <a href="https://marudor.de/details/' + train_name + '" target="_blank"><img src="' + getMediaURL("marudor.svg") + '" style="height: 2em; vertical-align:middle;"></a>';
+            train_name_text = bahnParseTrainName(train_name.innerText);
+            if(typeof train_name_text !== 'undefined') {
+              var marudor_button = domCreateButtonMarudor("/details/" + train_name_text);
+              train_name.after(marudor_button);
             }
           });
         });
@@ -53,7 +79,8 @@ var connection_result_observer = new MutationObserver((mutations) => {
         var stations = timetable.querySelectorAll("tr td.station");
         stations.forEach((station) => {
           var station_name = station.innerText;
-          station.innerHTML = station.innerHTML + ' <a href="https://marudor.de/' + station_name + '" target="_blank"><img src="' + getMediaURL("marudor.svg") + '" style="height: 2em; vertical-align:middle;"></a>';
+          var marudor_button = domCreateButtonMarudor("/" + station_name);
+          station.append(marudor_button);
         });
 
       }