Adding div element to body or document in JavaScript

Question

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="position:absolute;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="position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>'+document.body.innerHTML; — Ricky
– Ricky, Commented Apr 1, 2013 at 9:39

Peter Tadros · Accepted Answer · 2013-04-01 12:03:22Z

321

Using Javascript

var elemDiv = document.createElement('div');
elemDiv.style.cssText = 'position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;';
document.body.appendChild(elemDiv);

Using jQuery

$('body').append('<div style="position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>');

answered Apr 1, 2013 at 12:03

Peter Tadros

9,4353 gold badges38 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Spencer Williams Over a year ago

strangest thing. at my worst, pure javascript has always been the way to do anything I wanted to do.

MacroMan Over a year ago

This should be the accepted answer. It is the only answer that goes about this in the correct way.

felwithe Over a year ago

@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.)

MacroMan Over a year ago

@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.

averasko Over a year ago

appendChild() and insertBefore() give even more flexibility on the location of the element to be inserted

|

Herbert Van-Vliet · Accepted Answer · 2017-11-18 17:46:22Z

223

Try this out:-

http://jsfiddle.net/adiioo7/vmfbA/

Use

document.body.innerHTML += '<div style="position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>';

instead of

document.body.innerHTML = '<div style="position:absolute;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 = 'position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000';
document.body.appendChild(elem);

edited Nov 18, 2017 at 17:46

Herbert Van-Vliet

82412 silver badges18 bronze badges

answered Apr 1, 2013 at 9:43

Aditya Singh

9,6125 gold badges35 silver badges56 bronze badges

8 Comments

fegemo Over a year ago

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

anoopelias Over a year ago

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.

Christian Over a year ago

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.

MacroMan Over a year ago

-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

Kranthi Kiran P Over a year ago

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.

|

Yash · Accepted Answer · 2021-04-20 18:46:13Z

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);

Joakim Poromaa Helger · Accepted Answer · 2018-05-10 13:57:29Z

23

Instead of replacing everything with innerHTML try:

document.body.appendChild(myExtraNode);

edited May 10, 2018 at 13:57

answered Nov 4, 2016 at 10:47

Joakim Poromaa Helger

1,39110 silver badges17 bronze badges

2 Comments

Christian Over a year ago

Note that you can get to the body simply by doing document.body.

Abhishek Sinha Over a year ago

This is a better solution.

Vibhor Dube · Accepted Answer · 2021-01-27 10:45:40Z

11

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

answered Jan 27, 2021 at 10:45

Vibhor Dube

5,2211 gold badge27 silver badges35 bronze badges

Comments

Luís Ramalho · Accepted Answer · 2020-04-12 10:33:20Z

9

The modern way is to use ParentNode.append(), like so:

let element = document.createElement('div');
element.style.cssText = 'position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;';
document.body.append(element);

answered Apr 12, 2020 at 10:33

Luís Ramalho

10.2k4 gold badges54 silver badges69 bronze badges

Comments

Cody Norden · Accepted Answer · 2013-04-01 09:41:16Z

2

Try doing

document.body.innerHTML += '<div style="position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>'

answered Apr 1, 2013 at 9:41

Cody Norden

934 bronze badges

Comments

Yashar Aliabbasi · Accepted Answer · 2019-01-12 08:16:14Z

2

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;

edited Jan 12, 2019 at 8:16

answered Jan 11, 2019 at 19:37

Yashar Aliabbasi

2,7591 gold badge28 silver badges35 bronze badges

Comments

twernt · Accepted Answer · 2016-03-23 16:15:13Z

-1

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";

edited Mar 23, 2016 at 16:15

twernt

20.6k5 gold badges35 silver badges41 bronze badges

answered Mar 23, 2016 at 15:56

Sayanjyoti Das

151 bronze badge

1 Comment

Christian Over a year ago

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.

Poussy · Accepted Answer · 2019-11-02 10:24:10Z

-6

Here's a really quick trick: Let's say you wanna add p tag inside div tag.

<div>
<p><script>document.write(<variablename>)</script></p>
</div>

And that's it.

answered Nov 2, 2019 at 10:24

Poussy

1014 bronze badges

Collectives™ on Stack Overflow

Adding div element to body or document in JavaScript

10 Answers 10

6 Comments

Try this out:-

8 Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

6 Comments

Try this out:-

8 Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related