Adicionando o elemento div ao corpo ou documento em JavaScript

Estou criando uma checkbox de luz em JavaScript puro. Por isso estou fazendo uma sobreposição. Quero adicionar essa sobreposição ao corpo, mas também quero manter o conteúdo na página. Meu código atual adiciona o overlay div, mas também remove o conteúdo atual no corpo. Como adicionar o elemento div e manter o conteúdo no corpo?

var el = document.getElementById('element'); var body = document.getElementsByTagName('body'); el.innerHTML = '

Click me

'; document.getElementById('clickme').onclick = function (e) { e.preventDefault(); document.body.innerHTML = '
'; }

Tente isso: –

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

Usar

 document.body.innerHTML += '
';

ao invés de

 document.body.innerHTML = '
';

Editar: – Idealmente, você deve usar o método body.appendChild vez de alterar o 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); 

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

Usando jQuery

 $('body').append('
');

Em vez de replace tudo por innerHTML, tente:

document.body.appendChild(myExtraNode);

melhorando o post de @Peter T, reunindo todas as soluções em um só lugar.

Element.insertAdjacentHTML ()

 function myFunction() { window.document.body.insertAdjacentHTML( 'afterbegin', '
With some data...
' ); } 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}"; }

Usando o XPath localize a posição do Elemento na Árvore de DOM e insira o texto especificado em uma posição especificada para um XPath_Element. tente este código pelo console do navegador.

 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 = '
Hi My name is \"YASHWANTH\"
'; var position = 'beforeend'; insertHTML_ByXPath(xpath_DOMElement, position, childHTML);

Tente fazer

 document.body.innerHTML += '
'

A melhor e melhor maneira é criar um elemento e anexá-lo à tag body . A segunda maneira é primeiro obter a propriedade innerHTML do body e adicionar código a ela. Por exemplo:

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