Sto creando un light box in puro JavaScript. Per questo sto facendo una sovrapposizione. Voglio aggiungere questo overlay al corpo, ma voglio anche mantenere il contenuto sulla pagina. Il mio codice corrente aggiunge il div overlay ma rimuove anche i contenuti correnti nel corpo. Come aggiungere l'elemento div e mantenere i contenuti sul corpo?

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

Prova questo: -

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

Uso

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

invece di

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

Modifica: - Idealmente dovresti usare il body.appendChildmetodo invece di cambiare ilinnerHTML

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

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

Utilizzando jQuery

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

Invece di sostituire tutto con innerHTML prova:

document.body.appendChild(myExtraNode);

migliorare il posto di @Peter T, riunendo tutte le soluzioni in un unico posto.

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

Utilizzando XPathtrova la posizione dell'elemento nella struttura ad albero DOM e inserisci il testo specificato in una posizione specificata in un XPath_Element. prova questo codice sulla console del browser.

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

Prova a fare

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

Puoi creare il tuo divcodice HTML e impostarlo direttamente in body(o qualsiasi elemento) con il seguente codice:

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

Il modo moderno è usare ParentNode.append(), in questo modo:

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

Il modo migliore e migliore è creare un elemento e aggiungerlo al bodytag. Il secondo modo è prima ottenere la innerHTMLproprietà bodye aggiungere il codice con essa. Per esempio:

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

Ecco un trucco davvero veloce: supponiamo che tu voglia aggiungere il tag p all'interno del tag div.

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

E questo è tutto.