title: Adding div element to body or document in JavaScript
body: <p>I am creating a light box in pure JavaScript. For that I am making an overlay. I want to add this overlay to body but I also want to keep the content on the page. My current code adds the overlay div but it also removes the current contents in body. <strong>How to add div element and keep contents on body?</strong></p>
  
  <pre><code>var el = document.getElementById('element');
  var body = document.getElementsByTagName('body');
  el.innerHTML = '&lt;p&gt;&lt;a id="clickme" href="#"&gt;Click me&lt;/a&gt;&lt;/p&gt;';
  document.getElementById('clickme').onclick = function (e) {
      e.preventDefault();
      document.body.innerHTML = '&lt;div style="position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"&gt;&lt;/div&gt;';
  }
  </code></pre>