Javascript 我有没有办法通过在页面上重新显示特定元素来强制浏览器修复无效的标记？

我有一种情况，元素通过一个特定的组件动态地改变。 此组件更改这些元素的innerHTML，但实际上并不重新呈现元素，而是仅重新呈现其内容。 这会导致最终的DOM与最初出现在页面上的DOM不同，这对我来说是个问题

这种混淆的一个例子是： 如果我们采用以下标记：

<h1 id="foo">Hi there stranger!</h1>

<h1 id="foo">Hi <h2>there</h2> stranger!</h1>

你好，陌生人！

我添加了以下JS代码：

document.getElementById('foo').innerHTML = "Hi <h2>there</h2> stranger!";

document.getElementById（'foo'）.innerHTML=“你好，陌生人！”；

我们将生成以下标记：

<h1 id="foo">Hi there stranger!</h1>

<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节点X

创建新内容节点和原始节点X

移除节点X

---

我认为这样做的一般过程是：

查找html节点X

创建新内容节点和原始节点X

移除节点X

我称之为“修复无效标记的尝试”，而不是“重新加载”。无论如何，您应该将html分配给层次结构中高于相关节点的节点。作为最后手段，重新加载整个

应该可以：

 document.body.innerHTML = document.body.innerHTML

另一个选项是使用

outerHTML

，即：

document.getElementById('foo').outerHTML = "<h1>Hi <h2>there</h2> stranger!</h1>";

document.getElementById（'foo'）.outerHTML=“你好，陌生人！”；

至少在FF中，这似乎能按预期工作。

我称之为“尝试修复无效标记”，而不是“重新加载”。无论如何，您应该将html分配给层次结构中高于相关节点的节点。作为最后手段，重新加载整个

应该可以：

 document.body.innerHTML = document.body.innerHTML

另一个选项是使用

outerHTML

，即：

document.getElementById('foo').outerHTML = "<h1>Hi <h2>there</h2> stranger!</h1>";

document.getElementById（'foo'）.outerHTML=“你好，陌生人！”；

---

---

至少在FF中，这似乎可以按预期工作。

那么你的意思是，基本上，创建原始版本的克隆并删除原始版本？事实上，我已经试过了，而且效果很好，但我不想这样做，因为它可能很昂贵。如果可能的话，我宁愿强制重播原作。它不是真正的克隆，因为你想用h2替换h1。不，你误解了情况。H1已经存在了，我不知道它是什么，因为该组件可以在DOM上的任何元素上使用。用户使用该组件在H1中添加H2。然后使用H1中的H2渲染DOM。但是，如果我存储这个DOM并在用户下次访问时将其作为页面的一部分，则DOM会将H1和H2分开，因为该标记无效。如果它在第一个页面中将DOM分开，那就好了，因为这样用户就可以看到其操作的结果，但当浏览器第一次“撒谎”时，生成的DOM无效。首先，我想强制浏览器正确地呈现DOM。你是说，基本上，创建一个原始的克隆并删除原始的？事实上，我已经试过了，而且效果很好，但我不想这样做，因为它可能很昂贵。如果可能的话，我宁愿强制重播原作。它不是真正的克隆，因为你想用h2替换h1。不，你误解了情况。H1已经存在了，我不知道它是什么，因为该组件可以在DOM上的任何元素上使用。用户使用该组件在H1中添加H2。然后使用H1中的H2渲染DOM。但是，如果我存储这个DOM并在用户下次访问时将其作为页面的一部分，则DOM会将H1和H2分开，因为该标记无效。如果它在第一个页面中将DOM分开，那就好了，因为这样用户就可以看到其操作的结果，但当浏览器第一次“撒谎”时，生成的DOM无效。首先，我想强制浏览器正确呈现DOM。H只是一个例子，组件可以创建无限多个标记。它是动态的，由最终用户控制。H1只是呈现过程中变化的一个例子——例如，我发现处理空白的方式存在差异，用户使用空白格式化内容（使用ContentEdiaTable），这是一个主要问题，因为生成的标记不同于yintended。H只是一个例子，组件可以创建无限多的标记。它是动态的，由最终用户控制。H1只是呈现过程中变化的一个例子——例如，我发现处理空白的方式有所不同，而且当用户使用空白来格式化内容时（使用ContentEdiaTable），这是一个主要问题，因为生成的标记与渲染过程不同。我也想到了这一点，但这似乎非常昂贵。特别是对于正文正下方的元素，如您所述。但是感谢您对标题的评论，我会修复它，您是对的。：）哇，炸药解决方案。。。所有动态连接的事件处理程序都走了，再见…好的，Jay（尽管愤世嫉俗可能有点强烈；））哥们，成功了！太好了，谢谢。它可能会导致我在特定元素上丢失事件，我需要检查，但我可以处理。芝士