Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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. How to add div element and keep contents on body?

var el = document.getElementById('element');
var body = document.getElementsByTagName('body');
el.innerHTML = '<p><a id="clickme" href="#">Click me</a></p>';
document.getElementById('clickme').onclick = function (e) {
    e.preventDefault();
    document.body.innerHTML = '<div style="width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>';
                have you try to append it like : document.body.innerHTML = '<div style="width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>'+document.body.innerHTML;
– Ricky
                Apr 1, 2013 at 9:39
var elemDiv = document.createElement('div');
elemDiv.style.cssText = 'width:100%;height:100%;opacity:0.3;z-index:100;background:#000;';
document.body.appendChild(elemDiv);
Using jQuery
$('body').append('<div style="width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>');
                strangest thing. at my worst, pure javascript has always been the way to do anything I wanted to do.
– Spencer Williams
                Feb 21, 2017 at 1:25
                This should be the accepted answer. It is the only answer that goes about this in the correct way.
– MacroMan
                Jul 17, 2017 at 15:48
                @MacroMan Even the jquery version? I'm using jquery and would like to do it properly that way too. (Just making sure because his jquery answer is only one line and doesn't seem to create a node or anything.)
– felwithe
                Mar 21, 2018 at 15:23
                @felwithe The jQuery version is acceptable, but you may wish to create a node from scratch and apply the styles individually if you need more clarity in your code.
– MacroMan
                Mar 22, 2018 at 8:59
                appendChild() and insertBefore() give even more flexibility on the location of the element to be inserted
– averasko
                Jan 30, 2020 at 18:18
document.body.innerHTML += '<div style="width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>';
instead of 
document.body.innerHTML = '<div style="width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>';
Edit:-
Ideally you should use body.appendChild method instead of changing the innerHTML
var elem = document.createElement('div');
elem.style.cssText = 'width:100%;height:100%;opacity:0.3;z-index:100;background:#000';
document.body.appendChild(elem);
                You need to consider that doing document.body.innerHTML = 'something' incurs in a lot of unnecessary computation because the browser needs to parse the 'something' string and that takes a lot in a big page. A much more performant approach is to create the new element and attach it to the DOM. Check this comparision on jsperf: jsperf.com/innerhtml-vs-appendchild2
– fegemo
                Feb 11, 2015 at 12:54
                This approach will have some unwanted side effects as well. For example, all the bound events on child elements will become unbound once you set innerHTML afresh.
– anoopelias
                Mar 9, 2015 at 5:52
                This is definitely the wrong answer... the question asks about adding an element, not rewriting the whole page, see JPH's for a better alternative.
– Christian
                Mar 17, 2017 at 22:57
                -1. This is an awful way to achieve this. If you are reading this, do not use this slow and dated solution. Look at the answer by @peter-t
– MacroMan
                Jul 17, 2017 at 15:50
                Not only is this slow, but destroys the earlier elements, so any event listeners attached to the page earlier are lost!  Avoid doing this at all costs. Use appendChild instead.
– Kranthi Kiran P
                Aug 13, 2017 at 14:13
improving the post of @Peter T, by gathering all solutions together at one place.
Element.insertAdjacentHTML()
function myFunction() {
    window.document.body.insertAdjacentHTML( 'afterbegin', '<div id="myID" style="color:blue;"> With some data...</div>' );
function addElement(){
    var elemDiv = document.createElement('div');
    elemDiv.style.cssText = 'width:100%;height:10%;background:rgb(192,192,192);';
    elemDiv.innerHTML = 'Added element with some data'; 
    window.document.body.insertBefore(elemDiv, window.document.body.firstChild);
    // document.body.appendChild(elemDiv); // appends last of that element
function addCSS() {
    window.document.getElementsByTagName("style")[0].innerHTML += ".mycss {text-align:center}";
Using XPath find the position of the Element in the DOM Tree and insert the specified text at a specified position to an XPath_Element. try this code over browser console.
function insertHTML_ByXPath( xpath, position, newElement) {
    var element = document.evaluate(xpath, window.document, null, 9, null ).singleNodeValue;
    element.insertAdjacentHTML(position, newElement);
    element.style='border:3px solid orange';
var xpath_DOMElement = '//*[@id="answer-33669996"]';
var childHTML = '<div id="Yash">Hi My name is <B>\"YASHWANTH\"</B></div>';
var position = 'beforeend';
insertHTML_ByXPath(xpath_DOMElement, position, childHTML);
The most underrated method is insertAdjacentElement.
You can literally add your HTML using one single line.
document.body.insertAdjacentElement('beforeend', html)
Read about it here - https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement
let element = document.createElement('div');
element.style.cssText = 'width:100%;height:100%;opacity:0.3;z-index:100;background:#000;';
document.body.append(element);
You can make your div HTML code and set it directly into body(Or any element) with following code:

var divStr = '<div class="text-warning">Some html</div>';
document.getElementsByTagName('body')[0].innerHTML += divStr;
The best and better way is to create an element and append it to the body tag.
Second way is to first get the innerHTML property of body and add code with it. For example:
var b = document.getElementsByTagName('body');
b.innerHTML = b.innerHTML + "Your code";
                Firstly, you can get to the page body by simply doing document.body, secondly as I mentioned before, don't rewrite the whole page just to append an element.
– Christian
                Mar 17, 2017 at 22:57
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.