Ich erstelle eine Light Box in reinem JavaScript. Dafür mache ich eine Überlagerung. Ich möchte dieses Overlay zum Body hinzufügen, aber ich möchte auch den Inhalt auf der Seite behalten. Mein aktueller Code fügt das Overlay-Div hinzu, entfernt aber auch den aktuellen Inhalt im Body. Wie füge ich ein div-Element hinzu und behalte den Inhalt auf dem Körper?

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

Probieren Sie es aus: -

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

Verwenden

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

anstatt

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

Bearbeiten: - Idealerweise sollten Sie die body.appendChildMethode verwenden, anstatt die zu änderninnerHTML

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

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

Verwenden von jQuery

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

Anstatt alles durch innerHTML zu ersetzen, versuchen Sie:

document.body.appendChild(myExtraNode);

Verbesserung des Beitrags von @Peter T durch Zusammenführen aller Lösungen an einem Ort.

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

Verwenden Sie XPathSuchen der Position des Elements im DOM-Baum und fügen Sie den angegebenen Text an einer angegebenen Position in ein XPath_Element ein. Versuchen Sie diesen Code über die Browserkonsole.

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

Versuchen Sie es

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

Sie können Ihren divHTML-Code erstellen und ihn bodymit folgendem Code direkt in (oder ein beliebiges Element) setzen:

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

Der moderne Weg ist ParentNode.append(), wie folgt zu verwenden :

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

Der beste und bessere Weg ist, ein Element zu erstellen und es an das bodyTag anzuhängen . Der zweite Weg besteht darin, zuerst die innerHTMLEigenschaft von bodyabzurufen und Code hinzuzufügen. Beispielsweise:

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

Hier ist ein sehr schneller Trick: Angenommen, Sie möchten ein p-Tag in das div-Tag einfügen.

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

Und das ist es.