2

我有一种情况，即通过特定组件动态更改元素。这个组件改变了这些元素的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）中做到这一点？

4

2 回答 2

0

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

  1. 找到 html 节点 X
  2. 创建新的内容节点并在原始节点 X之前插入
  3. 删除节点 X
于 2012-05-02T16:31:29.490 回答
0

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

 document.body.innerHTML = document.body.innerHTML

另一种选择是使用outerHTML，即：

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

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

于 2012-05-02T16:35:10.363 回答