我有这样一种情况，即通过特定组件动态更改元素。 该组件更改了这些元素的 innerHTML 但实际上并不重新呈现元素，而只是重新呈现其内容。 这会导致最终 DOM 与最初出现在页面上时不同的情况 - 这对我来说是个问题。
这种混淆的一个例子是: 如果我们采用以下标记:
<h1 id="foo">Hi there stranger!</h1>
然后我添加以下 JS 代码:
document.getElementById('foo').innerHTML = "Hi <h2>there</h2> stranger!";
我们将得到以下标记:
<h1 id="foo">Hi <h2>there</h2> stranger!</h1>
它会像上面看到的一样呈现(H2 在 H1 中)，但是如果这个标记首先出现在页面上，它将呈现为:
<h1>Hi</h1> <h2>there</h2> <h1>stranger!</h1>
这显然会产生不同的文档。
所以，我的问题是: 如何强制浏览器重新呈现此标记？ 我希望能够引用上面的 H1 并告诉它以相同的方式它首先呈现的方式重新呈现。 我如何在所有主要引擎(Gecko、Webkit、IE)中执行此操作？
最佳答案
我将此称为“尝试修复无效标记”，而不是“重新渲染”。无论如何，您应该将 html 分配给层次结构中比相关节点更高的节点。不得已，重装全<body>应该工作:
document.body.innerHTML = document.body.innerHTML
另一种选择是使用 outerHTML ，即:
document.getElementById('foo').outerHTML = "<h1>Hi <h2>there</h2> stranger!</h1>";
至少在 FF 中，这似乎按预期工作。
关于javascript - 有没有办法通过重新呈现页面上的特定元素来强制浏览器修复无效标记？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10417726/