小开

试试看

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

小开

通过把所有的解决方案集中在一个地方来改进@Peter T 的帖子。

插入 AdjacentHTML ()

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

小开

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

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

小开

不要用 innerHTML 替换所有内容，试试:

document.body.appendChild(myExtraNode);

小开

您可以使您的 div HTML 代码，并设置它直接到 body(或任何元素)与以下代码:

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

小开

这里有一个小窍门: 假设您想在 div 标记中添加 p 标记。

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

就是这样。

小开

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

小开

最被低估的方法是 insertAdjacentElement。您可以简单地使用一行添加 HTML。

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

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

在 JavaScript 中向 body 或 document 添加 div 元素

试试这个:-