试试这个： -

Question

我正在用纯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>';
}

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

Answer 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.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 3

不要用innerHTML替换所有内容，请尝试：

document.body.appendChild(myExtraNode);

Answer 4

improving the post of @Peter T, by gathering all solutions together at one place.

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

Using XPath find the position of the Element in the DOM Tree and insert the specified text at a specified position to an XPath_Element. try this code over browser console.

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

最被低估的方法是insertAdjacentElement。您可以使用一行字面意思添加 HTML。

document.body.insertAdjacentElement('beforeend', html)

在此处阅读 - https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement

Answer 7

现代的方法是使用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);

Answer 8

最好也是更好的方法是创建一个元素并将其附加到body标记。第二种方法是首先获取innerHTML的{{1}}属性并添加代码。例如：

body

Answer 9

您可以制作您的div HTML代码，并使用以下代码将其直接设置为body（或任何元素）：

var divStr = '<div class="text-warning">Some html</div>';
document.getElementsByTagName('body')[0].innerHTML += divStr;

Answer 10

这是一个非常快速的技巧：假设您要在div标签中添加p标签。

<div>
<p><script>document.write(<variablename>)</script></p>
</div>

就是这样。

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

10 个答案:

试试这个： -