我正在用纯JavaScript创建灯箱。为此,我要进行覆盖。我想将此叠加层添加到正文,但我也想将内容保留在页面上。我当前的代码添加了overlay 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>';
}
试试这个:
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
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>');
而不是用innerHTML替换所有内容,请尝试:
document.body.appendChild(myExtraNode);
通过将所有解决方案集中在一个地方来改善@Peter T的职位。
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}";
}
使用XPath
查找元素在DOM树中的位置,并将指定的文本在XPath_Element的指定位置插入。在浏览器控制台上尝试此代码。
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);
尝试做
document.body.innerHTML += '<div style="position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>'
您可以使用以下代码制作div
HTML代码并将其直接设置为body
(或任何元素):
var divStr = '<div class="text-warning">Some html</div>';
document.getElementsByTagName('body')[0].innerHTML += divStr;
现代方法是使用ParentNode.append()
,如下所示:
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);
最好的方法是创建一个元素并将其附加到body
标签中。第二种方法是首先获取的innerHTML
属性body
并向其中添加代码。例如:
var b = document.getElementsByTagName('body');
b.innerHTML = b.innerHTML + "Your code";
这是一个非常简单的技巧:假设您想在div标签内添加p标签。
<div>
<p><script>document.write(<variablename>)</script></p>
</div>
就是这样。
本文地址:http://javascript.askforanswer.com/zaijavascriptzhongjiangdivyuansutianjiadaozhengwenhuowendang.html
文章标签:javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
文章标签:javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!