Estoy creando una caja de luz en JavaScript puro. Para eso estoy haciendo una superposición. Quiero agregar esta superposición al cuerpo, pero también quiero mantener el contenido en la página. Mi código actual agrega el div de superposición, pero también elimina el contenido actual en el cuerpo. ¿Cómo agregar un elemento div y mantener los contenidos en el cuerpo?

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

Probar esto:-

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

Utilizar

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

en vez de

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

Editar: - Idealmente, debe usar el body.appendChildmétodo en lugar de cambiar elinnerHTML

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

En lugar de reemplazar todo con innerHTML, intente:

document.body.appendChild(myExtraNode);

mejorando la publicación de @Peter T, al reunir todas las soluciones en un solo lugar.

Element.insertAdarestHTML ()

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

Usando XPathencontrar la posición del elemento en el árbol DOM e insertar el texto especificado en una posición especificada a un XPath_Element. prueba este código en la consola del 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 = '<div id="Yash">Hi My name is <B>\"YASHWANTH\"</B></div>';
var position = 'beforeend';
insertHTML_ByXPath(xpath_DOMElement, position, childHTML);

Trata de hacerlo

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

Puede crear su divcódigo HTML y configurarlo directamente en body(O cualquier elemento) con el siguiente código:

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

La forma moderna es usar ParentNode.append(), así:

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

La mejor y mejor manera es crear un elemento y agregarlo a la bodyetiqueta. La segunda forma es obtener primero la innerHTMLpropiedad de bodyy agregarle código. Por ejemplo:

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

Aquí hay un truco muy rápido: digamos que quieres agregar la etiqueta p dentro de la etiqueta div.

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

Y eso es.