在 JavaScript 中将 div 元素添加到正文或文档中试试这个：-

javascript

2022-08-30 01:40:52

我正在用纯JavaScript创建一个灯箱。为此，我正在制作一个叠加层。我想将此叠加添加到正文中，但我也想将内容保留在页面上。我当前的代码添加了覆盖 div，但它也删除了正文中的当前内容。如何添加div元素并将内容保留在身体上？

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

答案 1

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

使用 jQuery

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

答案 2

试试这个：-

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

用

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

而不是

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

编辑：-理想情况下，您应该使用方法而不是更改body.appendChildinnerHTML

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