如何在用户输入并将其更新为实时更新时将文本附加到div？

Question

我有一个幻灯片创建应用程序，用户可以在用户输入文本时输入markdown并预览所述markdown。我正在使用带有降价模式的uikit HTML编辑器。

您可以预览应用here。

我还希望能够使用softwareupdate的{​​{1}}抓取文档的innerHTML并将其附加到幻灯片的预览中（位于下图中）用户正在创建（我目前正在执行此操作，您可以在下面看到该代码）

id

我的问题是我希望能够在用户输入文本时获取文本，以便它实时更新markDownPre，其ID为var slidePre = document.getElementById('markDownPre').innerHTML; var slidePreText = slidePre.split('<hr>', 1); 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>'); } 窗口，其中包含相同的文本<div> slidePreTextTron div class。我怎么能做到这一点？

以下是小预览窗口的图像：

我上传了这张图片，因为它目前尚未在应用的已部署版本中实现，而是在Github仓库的开发分支中，您可以抓取here。

非常感谢任何帮助。