在JavaScript中将div元素添加到正文或文档中 [英] Adding div element to body or document in JavaScript

问题描述

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

I am creating a light box in pure JavaScript. For that I am making an overlay. I want to add this overlay to body but I also want to keep the content on the page. My current code adds the overlay div but it also removes the current contents in body. How to add div element and keep contents on body?

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

推荐答案

试试这个： -

http://jsfiddle.net/diioo7 / vmfbA /

Try this out:-

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.appendChild 方法而不是更改 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);

这篇关于在JavaScript中将div元素添加到正文或文档中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！