title: Replace html element entirely using JavaScript (no libraries)
body: <p>I am working on embedded WKWebView (a browser view on iOS), so I don't want/can't use any libraries and need to achieve the following purely in JavaScript.</p>
  
  <p>While content of the web view is loading, I want to clear previous content, and display something like "Loading...". </p>
  
  <p>The most obvious way is to </p>
  
  <pre><code>document.body.innerHTML = "Loading...";
  </code></pre>
  
  <p>(method 1)</p>
  
  <p>But the problem is it leaves other elements (e.g. scripts, styles) of the page intact, while I need the style to be reset (e.g. clear background, fonts, etc)</p>
  
  <p>There is a way to clear everything by removing HTML element, which is good</p>
  
  <pre><code>document.documentElement.remove()
  </code></pre>
  
  <p>(method 2)</p>
  
  <p>But how can I then add a new HTML element with new content?</p>
  
  <p>So is there a way to add a new HTML element using method 2, or to clear style, scripts, etc using method 1?</p>
  
  <p>Note: <code>Loading...</code> is just an example text I want to use, actual content could be proper HTML if it's important.</p>