title: How to change the HTML content as it's loading on the page
body: <p>I do A/B Testing on our site and I do most of my work is in a JS file that is loaded at the top of the page before anything else is rendered but after jQuery has loaded which comes in handy at times.</p>
  
  <p>Taking a very simple example of changing an H1 tag, I would normally inject a style in the head to set the H1 opacity to 0 and then on DOMContentLoaded, I would manipulate the H1 contents and then set the opacity to 1. The reason for this is to avoid a flash of the old content before the change takes place - hiding the whole object is more graceful on the eye.</p>
  
  <p>I've started to look at the MutationObserver API. I've used this before when changing content in an overlay dialog box that the user could open which seems to be quite a cool approach and I'm wondering if anyone has managed to use a MutationObserver to listen to the document as it's first loading/ parsing and make changes to the document before first render and before DOMContentLoaded?</p>
  
  <p>This approach would then let me change the H1 content without having to hide it, change it, then show it.</p>
  
  <p>I've attempted but failed so far and have just ended up reading about the to-be-obselete Mutation Events and wondering if I'm trying to do something that just isn't possible. However we've (not me) have managed to put a robot on Mars so I'm hoping I can solve this.</p>
  
  <p>So is it possible to use MutationObservers to change the HTML content on-the-fly as the page is being loaded/ parsed?</p>
  
  <p>Thanks for any help or any pointers.</p>
  
  <p>Regards,
  Nick</p>