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

我正在用纯JavaScript创build一个灯箱。 为此我正在做一个覆盖。 我想添加这个覆盖到身体，但我也想保持在页面上的内容。 我目前的代码添加覆盖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>'; } 

Answer 1

试试这个：

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

Answer 2

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

Answer 3

而不是用innerHTMLreplace所有的东西，试试：

document.getElementsByTagName('body')[0].appendChild(myExtraNode);

Answer 4

改善@Peter T的职位，把所有的解决scheme集中在一个地方。

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

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

Answer 5

试着做

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

Answer 6

最好也是最好的方法是创build一个元素并将其附加到body标签。 第二种方法是首先获得body的innerHTML属性并添加代码。 例如：

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