【问题标题】：Adding div element to body or document in JavaScript在 JavaScript 中将 div 元素添加到正文或文档
【发布时间】：2013-03-22 09:12:18
【问题描述】：

我正在用纯 JavaScript 创建一个灯箱。为此，我正在制作一个叠加层。我想将此叠加层添加到正文，但我也想将内容保留在页面上。我当前的代码添加了覆盖 div，但它也删除了正文中的当前内容。 如何添加div元素并保持内容在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>';
}

【问题讨论】：

你有没有尝试像这样附加它：document.body.innerHTML = '
'+document.body.innerHTML;

标签： javascript

【解决方案1】：

尝试做

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

【讨论】：

【解决方案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);

【讨论】：

您需要考虑到执行 document.body.innerHTML = 'something' 会导致大量不必要的计算，因为浏览器需要解析 'something' 字符串并且在大页面中需要很多.一种更高效的方法是创建新元素并将其附加到 DOM。检查 jsperf 上的比较：jsperf.com/innerhtml-vs-appendchild2
这种方法也会有一些不需要的副作用。例如，一旦您重新设置innerHTML，子元素上的所有绑定事件都将变为未绑定。
这绝对是错误的答案...问题是关于添加元素，而不是重写整个页面，请参阅 JPH 以获得更好的选择。
-1。这是实现这一目标的糟糕方法。如果您正在阅读本文，请不要使用这种缓慢且过时的解决方案。看@peter-t的答案
这不仅速度慢，而且会破坏之前的元素，因此之前附加到页面的任何事件侦听器都会丢失！不惜一切代价避免这样做。请改用 appendChild。

【解决方案3】：

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

【讨论】：

最奇怪的事情。在我最糟糕的情况下，纯 JavaScript 一直是做任何我想做的事情的方式。
这应该是公认的答案。这是以正确方式解决此问题的唯一答案。
@MacroMan 即使是 jquery 版本？我正在使用 jquery 并且也想以这种方式正确地做到这一点。（只是确保因为他的 jquery 答案只有一行，并且似乎没有创建节点或任何东西。）
@felwithe jQuery 版本是可以接受的，但如果您需要更清晰的代码，您可能希望从头开始创建一个节点并单独应用样式。
appendChild() 和 insertBefore() 为要插入的元素的位置提供了更大的灵活性

【解决方案4】：

改进@Peter T 的帖子，将所有解决方案集中在一个地方。

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"]';
var childHTML = '<div id="Yash">Hi My name is <B>\"YASHWANTH\"</B></div>';
var position = 'beforeend';
insertHTML_ByXPath(xpath_DOMElement, position, childHTML);

【讨论】：

【解决方案5】：

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

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

【讨论】：

首先，你可以通过简单的document.body到达页面正文，其次，正如我之前提到的，不要为了添加一个元素而重写整个页面。

【解决方案6】：

尝试用 innerHTML 替换所有内容：

document.body.appendChild(myExtraNode);

【讨论】：

请注意，您只需执行document.body即可到达正文。
这是一个更好的解决方案。

【解决方案7】：

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

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

【讨论】：

最好和最简单的方法。谢谢！

【解决方案8】：

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

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

就是这样。

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

最被低估的方法是insertAdjacentElement。你可以用一行字来添加你的 HTML。

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

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

【讨论】：