Javascript 如何从用户输入中不断实时更新HTML？

我创建了一个函数，从元素

id

中获取

.innerHTML

，并将所述HTML附加到图像上。我的问题是，我获取的HTML来自HTML编辑器。用户可以在其中输入他们的降价。我需要获取HTML的更新版本，并在用户更新文本时将其附加到图像中。不断地重新呈现实时输入。我还需要在用户更改用户可以选择的主题时更新此逻辑

下面是我创建的函数的代码副本，但似乎不起作用。同样，Github回购协议也适用于任何想尝试的人。您还可以看到站点的实时版本，但我尝试添加的功能未包含在部署的版本中。它仅在前面列出的回购中的

开发

分支中。任何帮助都将不胜感激

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] + ' />');
            }
        }

var slidePre=document.getElementById（'markDownPre'）.innerHTML；
var slidePreText=slidePre.split（“
”，1）；
var slideElement=document.getElementById（'markDownPre'）；
//关于监听重置状态
$（“#slideElement”）。在（'propertychange change click keyup input paste'上，函数（事件）{
var slidePreNew=slideElement；
var slidePreTextNew=slidePre.split（“
”，1）；
如果（slidePreText！==slidePreTextNew）{
slidePreText===slidePreTextNew；
}
});
if（颜色方案[主题]==颜色方案[“Tron Blue”]）{
$（'.slide preview img:last child'）.remove（）；
$（'.slide preview video:last child'）.remove（）；
$（'.slide preview'）。追加（''）；
$（'.slide preview'）。追加（''+slidePreText+''）；
}
if（颜色方案[主题]==颜色方案[“霓虹灯”]）{
$（'.slide preview img:last child'）.remove（）；
$（'.slide preview video:last child'）.remove（）；
$（'.slide preview'）。追加（''）；
}
如果（颜色方案[主题]==颜色方案[“Hello Kitty”]）{
$（'.slide preview img:last child'）.remove（）；
$（'.slide preview video:last child'）.remove（）；
$（'.slide preview'）。追加（''）；
}
如果（世界信息==“Tron网格”）{
if（颜色方案[主题]==颜色方案[“Tron Blue”]）{
$（'.slide preview img:last child'）.remove（）；
$（'.slide preview video:last child'）.remove（）；
$（'.slide preview'）。追加（''）；
}
if（颜色方案[主题]==颜色方案[“霓虹灯”]）{
$（'.slide preview img:last child'）.remove（）；
$（'.slide preview video:last child'）.remove（）；
$（'.slide preview'）。追加（''）；
}
如果（颜色方案[主题]==颜色方案[“Hello Kitty”]）{
$（'.slide preview img:last child'）.remove（）；
$（'.slide preview video:last child'）.remove（）；
$（'.slide preview'）。追加（''）；
}
}
如果（世界信息==“海洋日落”）{
if（颜色方案[主题]==颜色方案[“Tron Blue”]）{
$（'.slide preview img:last child'）.remove（）；
$（'.slide preview video:last child'）.remove（）；
$（'.slide preview'）。追加（''）；
}
if（颜色方案[主题]==颜色方案[“霓虹灯”]）{
$（'.slide preview img:last child'）.remove（）；
$（'.slide preview video:last child'）.remove（）；
$（'.slide preview'）。追加（''）；
}
如果（颜色方案[主题]==颜色方案[“Hello Kitty”]）{
$（'.slide preview img:last child'）.remove（）；
$（'.slide preview video:last child'）.remove（）；
$（'.slide preview'）。追加（''）；
}
}

你能像那样混合使用React和DOM方法吗？@dandavis没有什么能阻止你这样做，在某些情况下，使用DOM是不可避免的。但是，我没有看到React在这里的作用。我的印象是React有一个虚拟DOM，当vDOM和DOM不同步时，在尝试对修改过的子树应用补丁时会发生不好的事情。很抱歉，这是一个名为

themeUpdate

的组件内部，它实际上不需要显示，因为它是一个巨大的组件，这是我试图实现的功能的唯一相关代码。所有这些代码都位于上面列出的repo中的

main.jsx

文件中。您可以混合使用React和DOM方法吗？@dandavis没有什么可以阻止您这样做，在某些情况下，使用DOM是不可避免的。但是，我没有看到React在这里的作用。我的印象是React有一个虚拟DOM，当vDOM和DOM不同步时，在尝试对修改过的子树应用补丁时会发生不好的事情。很抱歉，这是一个名为

themeUpdate

的组件内部，它实际上不需要显示，因为它是一个巨大的组件，这是我试图实现的功能的唯一相关代码。所有这些代码都位于上面列出的回购协议中的

main.jsx

文件中。