如何从用户输入中不断更新附加的innerHTML？

Question

我创建了一个函数，我从元素.innerHTML中抓取id并在图像上附加所述HTML。我的问题是我抓取的HTML来自uikit HTML编辑器。在哪些用户可以输入他们的降价。我需要获取HTML的更新版本，并在用户更新文本时将其附加到图像中。不断重新渲染实时输入。当用户更改用户可以选择的主题时，我还需要进行此逻辑更新。

下面是我创建的函数代码的副本，但似乎不起作用。同样地，对于想要试一试的人来说，here是Github Repo。您还可以看到位于here的网站的实时版本，但我尝试添加的功能未包含在已部署的版本中。它仅在之前列出的回购中的development分支中。任何帮助将不胜感激。

var slidePre = document.getElementById('markDownPre').innerHTML;
var slidePreText = slidePre.split('<hr>', 1);

var slideElement = document.getElementById('markDownPre');

        // On listen reset state
        $('#slideElement').on('propertychange change click keyup input paste',  function(event) {

          var slidePreNew = slideElement;
          var slidePreTextNew = slidePre.split('<hr>', 1);

          if(slidePreText !== slidePreTextNew) {
              slidePreText === slidePreTextNew;
          }
      });

        if (colorScheme[theme] === colorScheme["Tron Blue"]) {
            $('.slide-preview img:last-child' ).remove();
            $('.slide-preview video:last-child' ).remove();
            $('.slide-preview').append('<img src=' + themePreview[0] + ' />');
            $('.slide-preview').append('<div id="slidePreTextTron" class="col-md-3">' + slidePreText + '</div>');
        }
        if (colorScheme[theme] === colorScheme["Neon Lights"]) {
            $('.slide-preview img:last-child' ).remove();
            $('.slide-preview video:last-child' ).remove();
            $('.slide-preview').append('<img src=' + themePreview[1] + ' />');
        }
        if (colorScheme[theme] === colorScheme["Hello Kitty"]) {
            $('.slide-preview img:last-child' ).remove();
            $('.slide-preview video:last-child' ).remove();
            $('.slide-preview').append('<img src=' + themePreview[2] + ' />');
        }

        if (worldInfo === "Tron Grid") {
            if (colorScheme[theme] === colorScheme["Tron Blue"]) {
                $('.slide-preview img:last-child' ).remove();
                $('.slide-preview video:last-child' ).remove();
                $('.slide-preview').append('<img src=' + themePreview[0] + ' />');
            }
            if (colorScheme[theme] === colorScheme["Neon Lights"]) {
                $('.slide-preview img:last-child' ).remove();
                $('.slide-preview video:last-child' ).remove();
                $('.slide-preview').append('<img src=' + themePreview[1] + ' />');
            }
            if (colorScheme[theme] === colorScheme["Hello Kitty"]) {
                $('.slide-preview img:last-child' ).remove();
                $('.slide-preview video:last-child' ).remove();
                $('.slide-preview').append('<img src=' + themePreview[2] + ' />');
            }
        }

        if (worldInfo === "Ocean Sunset") {
            if (colorScheme[theme] === colorScheme["Tron Blue"]) {
                $('.slide-preview img:last-child' ).remove();
                $('.slide-preview video:last-child' ).remove();
                $('.slide-preview').append('<video width="308" height="173" autoplay loop> <source src=' + themeVideo[0] + '></video>');
            }
            if (colorScheme[theme] === colorScheme["Neon Lights"]) {
                $('.slide-preview img:last-child' ).remove();
                $('.slide-preview video:last-child' ).remove();
                $('.slide-preview').append('<img src=' + themePreview[4] + ' />');
            }
            if (colorScheme[theme] === colorScheme["Hello Kitty"]) {
                $('.slide-preview img:last-child' ).remove();
                $('.slide-preview video:last-child' ).remove();
                $('.slide-preview').append('<img src=' + themePreview[5] + ' />');
            }
        }