使用 innerHTML 后 CSS 样式失效问题解决方法

使用 innerHTML 可能会导致 CSS 样式失效，这是因为 innerHTML 会重新渲染元素，导致样式丢失。以下是一些解决方法：

将 CSS 样式添加到元素的 class 中，并在使用 innerHTML 后重新应用该 class。 例如，您可以将样式添加到一个名为 my-class 的 class 中，然后在使用 innerHTML 后使用 element.classList.add('my-class') 重新应用该 class。
使用更安全的 DOM 操作方法。 而不是使用 innerHTML，您可以使用更安全的 DOM 操作方法，例如 createElement 和 appendChild，以构建和操作 DOM 元素。

使用 innerHTML 会增加安全风险，因为它可以导致跨站脚本攻击 (XSS)。攻击者可以通过注入恶意脚本到网页中来窃取用户信息或破坏网页功能。因此，建议使用更安全的 DOM 操作方法来避免此类安全风险。