首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在JavaScript中将div元素添加到正文或文档

在JavaScript中将div元素添加到正文或文档
EN

Stack Overflow用户
提问于 2013-04-01 17:37:59
回答 10查看 442K关注 0票数 169

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

代码语言:javascript
复制
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>';
}
EN

回答 10

Stack Overflow用户

回答已采纳

发布于 2013-04-01 17:43:34

试试这个:-

使用

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

而不是

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

编辑:-理想情况下,您应该使用body.appendChild方法,而不是更改innerHTML

代码语言:javascript
复制
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);
票数 200
EN

Stack Overflow用户

发布于 2013-04-01 20:03:23

使用Javascript

代码语言: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

代码语言:javascript
复制
$('body').append('<div style="position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>');
票数 254
EN

Stack Overflow用户

发布于 2016-11-04 18:47:24

尝试一下,而不是用innerHTML替换所有内容:

document.body.appendChild(myExtraNode);

票数 23
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/15741006

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档