我有一种情况，即通过特定组件动态更改元素。 这个组件改变了这些元素的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>
它将呈现与上面相同的内容（H1中的H2），但如果此标记首先出现在页面上，它将呈现为：
<h1>Hi</h1> <h2>there</h2> <h1>stranger!</h1>
这显然会产生不同的文件。
所以，我的问题是： 如何强制浏览器重新呈现此标记？ 我希望能够参考上面的H1并告诉它以首先渲染的相同的方式重新渲染。 我怎么能在所有主要引擎（Gecko，Webkit，IE）中做到这一点？
答案 0 :(得分：0)
我认为这样做的一般过程是：
答案 1 :(得分：0)
我称之为“尝试修复无效标记”，而不是“重新渲染”。无论如何，您应该将html分配给层次结构中比相关节点更高的节点。作为最后的手段，重新加载整个<body>应该有效：
document.body.innerHTML = document.body.innerHTML
另一种选择是使用outerHTML，即：
document.getElementById('foo').outerHTML = "<h1>Hi <h2>there</h2> stranger!</h1>";
至少在FF中，这似乎按预期工作。