Home/ Questions/Q 7889347
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T06:04:29+00:00

I have a situation where elements are changed on the fly through a specific

  • 0

I have a situation where elements are changed on the fly through a specific component.
This component changes the innerHTML of these elements but doesn’t actually rerender the element, but rather only its contents.
This leads to situations where the final DOM is different than it would be had it been on the page in the first place – this is a problem for me.

An example of such a mix up is this:
If we take the following markup:

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

And I add the following JS code:

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

We will result with the following markup:

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

It will be rendered same as seen above (with the H2 inside the H1), but if this markup were on the page in the first place it would get rendered as:

<h1>Hi</h1> <h2>there</h2> <h1>stranger!</h1>

Which obviously results in a different document.

So, my question is this:
How can I force the browser to rerender this markup?
I’d like to be able to refer to the above H1 and tell it to rerender in the same way it would have rendered in the first place.
How can I do this in all the major engines (Gecko, Webkit, IE)?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’d call this “attempt to fix invalid markup”, rather than “rerender”. Anyways, you should assign html to a node that is higher in the hierarchy than the node in question. As a last resort, reloading the whole <body> should work:

     document.body.innerHTML = document.body.innerHTML

    Another option would be to use outerHTML, that is:

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

    At least in FF, this appears to work as intended.

    • 0