Adding a div element to a body or document in JavaScript

Question

I am creating a light box in pure JavaScript. I do an overlay for this. I want to add this overlay to the body, but I also want to keep the content on the page. My current code adds an overlay div, but also deletes the current content in the body. How to add div element and save content 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>'; } 

Answer 1

Try it: -

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

 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 the body.appendChild method instead of changing 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); 

Answer 2

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

Answer 3

Instead of replacing everything with innerHTML try:

document.body.appendChild(myExtraNode);

Answer 4

improving @Peter T's post by bringing all the solutions together in 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 paste the specified text at the specified position in XPath_Element. try this code through your 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"]/table/tbody/tr[1]/td[2]/div'; var childHTML = '<div id="Yash">Hi My name is <B>\"YASHWANTH\"</B></div>'; var position = 'beforeend'; insertHTML_ByXPath(xpath_DOMElement, position, childHTML); 

Answer 5

Try to do

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

Answer 6

The best and best way is to create an element and add it to the body tag. The second way is to first get the innerHTML body property and add the code with it. For example:

 var b = document.getElementsByTagName('body'); b.innerHTML = b.innerHTML + "Your code"; 

Answer 7

You can create your HTML div code and set it directly in the body (or any element) using the following code:

 var divStr = '<div class="text-warning">Some html</div>'; document.getElementsByTagName('body')[0].innerHTML += divStr;