Javascript 使用一个包含大DIV的字符串并使用JS将其注入html，这是常见的做法吗

在JS中以字符串形式存储一个大的div树，并在需要时使用.innerHTML变量将其插入HTML中，这是常见的做法吗？例如，当用户单击按钮时，我需要显示一个表单。目前，我将表单的HTML保存为javascript文件中的字符串，当用户单击按钮时，该字符串将被注入主HTML文件。这是解决此类问题的方法还是有更好的解决方案/算法？我正在尝试使用electron制作本机应用程序。我不得不重复做类似的操作，我的JS文件主要包含字符串。是否有一个框架来解决这个问题？谢谢

好的，我将从讨论的角度来讨论这个问题。 鉴于：

• Html代码保存在JS文件中的字符串变量中
• 目的是在事件触发器上显示DOM的一部分。（Iam松散地使用术语DOM）。 问题:
• 这应该通过css操作来完成，即保持部分隐藏，然后在事件中显示它
• 这应该通过替换或将内容注入触发器的部分来完成吗

这两种方法都是有效的。Web开发人员来到本机开发领域是因为他们不习惯DOM之前的概念。我们所知道的就是DOM，一切都以DOM开始、运行和结束

Electron通过多进程模型将chrome+节点封装到一个环境中。这意味着您在电子应用程序中的程序以节点脚本开始，并且没有DOM。连想都没想

假设Node.js开始运行，我们使用js运行一系列函数。然后是时候使用这个叫做浏览器窗口的神奇类了。 我们启动它，调用chrome来创建这个经典的浏览器窗口。就像在浏览器或其他excel工作表上打开一个新标签一样；通过浏览器窗口，我们正在创建一个完全独立的进程，该进程将加载一个HTML页面。 当有HTML时，就有JS和CSS；所有这些结合在一起就是DOM。 DOM中发生的一切都留在DOM中；node.js不直接控制它，DOM也不控制node.js。当您从触发器提交本机浏览器功能时，必须在操作中调用它们，这显然是由electron环境维护的，因为chrome捆绑在其中。换句话说，我们不会为了它而在互联网上运行。这一切都发生在当地。因此，“原生pp开发”一词应运而生。据说这有点像劫机

无论如何，回到问题JS或CSS…无论哪种方式，它的DOM相关的问题。也就是说，在传统浏览器中，人们期望事情发生的方式没有什么不同

CSS方式

<div id='container'>
<div id='something' style='display:none;'>waited for button click to show</div>

</div>

两种方式都可以！但是，这里只有。 如果您像正常的浏览器功能那样使用CSS，DOM在绘制元素时就已经知道该元素。然而，通过JS方式，DOM在绘制元素后对其了解不多。
这就产生了一个问题，任何可能通过JSDOM在新注入的内容中触发的事件都不知道，因为它们尚未映射到内存中。所以，任何定制的点击或其他不定制的点击都无法通过JS方式工作。他们将通过CSS的方式，因为所有已映射到最初的绘画

因此，要么在注入之后运行一系列事件函数，让DOM知道发生了什么变化，然后告诉它该做什么。它不会自己识别事物。 或者，您必须采用事件委派的方式，即捕获容器div上的所有事件，然后过滤它是哪一个，并相应地执行某些操作。剩下的由多姆负责

例如：

document.querySelector("#container").onclick = function(event) {
  let target = event.target; // where was the click?

  if (target.id != 'something') return; // not on something? Then we're not interested

  alert('found something'); // highlight it
}; 

完整的例子 CSS方式

document.querySelector（“#某物”）.onclick=function（）{
console.log（'found'）；}；
document.querySelector（“#按钮”）.onclick=function（）{
document.querySelector（“#something”）.style.display='block'；}；

等我很久了！
向我展示！

否，尝试将HTML保存在

.HTML

文件中。不确定electron的具体情况，但您至少可以让按钮删除一个CSS类，该类的div包含要通过

display:none

或类似方式隐藏的表单。@Freddy感谢您的帮助。我正在尝试创建一个应用程序，以便用户能够遍历多个菜单来访问表单。当前，按下菜单按钮会打开一个模式，在其中，用户会看到菜单中的项目，但当用户单击添加项目按钮（也在模式中）时，模式内容会从显示菜单变为输入表单。对于使用您的方法实现类似的目标，有什么建议吗？我将加入上述讨论。。。。。假设您能够捕获交互信息，即用户从中选择的与CSS相关的关键字是toggle。您将切换两个div的显示，其中一个可见，而另一个不可见。下面是我的答案。嗨，赛义德，谢谢你的详细解释。现在我明白了为什么使用纯JS来处理这一切会非常乏味。我选择使用React，因为据我所知，它将抽象出您上面概述的更复杂的部分。再次感谢！不客气。SPA框架在这样的场景中是很好的，因为它们已经尝试并测试了不同的场景，因此总是有机会实现之前可能打算实现的任何想法。我不会因为同样的原因而跳出这个框架。框架运行的是一个上下文，当我们试图创建实用程序时，打破它最有帮助。阅读一下自定义HTML元素，看看它们是如何处理这整件事的。框架以自己的方式实现相同的功能。

document.querySelector("#container").onclick = function(event) {
  let target = event.target; // where was the click?

  if (target.id != 'something') return; // not on something? Then we're not interested

  alert('found something'); // highlight it
};