Javascript 在运行时注入要显示在页面顶部的HTML

我正在寻找一种方法，将HTML注入到已经加载的页面中，以响应用户单击该页面

确切地说，我需要做的是：

点击

生成要显示的HTML字符串

将该HTML字符串插入页面，显示在当前标记的顶部

其中，1已完成，2已部分完成，因此现在我需要在当前标记的顶部显示HTML字符串（如弹出框）。单击插入的标记后，插入的标记应消失。我该怎么做

这是作为Angular2 web应用程序的一个功能开发的，所以我想只使用typescript、HTML和CSS进行样式化，而不是使用现有的库来实现这一点

让事情变得更清楚的几点建议：

• 生成的HTML将是交互式的，因此可以单击它，而不仅仅是一个简单的弹出窗口或警报
• 当单击该HTML之外的区域时，应将生成的HTML从DOM中删除

---

像一个？你想让生成的html从DOM中完全消失吗？@SpencerWieczorek更像是一个引导模式-生成的html将包含交互对象，如按钮。@Matthew，是的。当单击HTML之外的区域时，应将生成的HTML从DOM中删除。我对typescript没有经验，但使用JavaScript，您可以将HTML保存在单独的文件中，然后调用

.load（'page.HTML'）

函数。然后，当用户在容器外部单击时，可以使用

.remove（“#parent_div_of_inserted_html”）

将其从页面中删除。但不确定如何将其转换为Typescript。例如？是否希望生成的html从DOM中完全消失？@SpencerWieczorek更像是一个引导模式-生成的html将包含按钮等交互对象。@Matthew，是的。当单击HTML之外的区域时，应将生成的HTML从DOM中删除。我对typescript没有经验，但使用JavaScript，您可以将HTML保存在单独的文件中，然后调用

.load（'page.HTML'）

函数。然后，当用户在容器外部单击时，可以使用

.remove（“#parent_div_of_inserted_html”）

将其从页面中删除。但不知道如何将其翻译成Typescript。