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

Adding div element to body or document in JavaScript

提问by Om3ga

I am creating a light box in pure JavaScript. For that I am making an overlay. I want to add this overlay to body but I also want to keep the content on the page. My current code adds the overlay div but it also removes the current contents in body. How to add div element and keep contents on body?

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

回答by Peter T.

Using Javascript

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

Using jQuery

使用 jQuery

$('body').append('<div style="position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>');

回答by Aditya Singh

Try this out:-

试试这个：-

http://jsfiddle.net/adiioo7/vmfbA/

http://jsfiddle.net/adiioo7/vmfbA/

Use

利用

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

instead of

代替

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

Edit:-Ideally you should use body.appendChildmethod instead of changing the innerHTML

编辑：-理想情况下，您应该使用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);

回答by Joakim Poromaa Helger

Instead of replacing everything with innerHTML try:

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

document.body.appendChild(myExtraNode);

document.body.appendChild(myExtraNode);

回答by Yash

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

通过将所有解决方案收集到一个地方来改进@Peter T 的帖子。

Element.insertAdjacentHTML()

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 XPathfind 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.

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

回答by Cody Norden

Try doing

尝试做

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

回答by Yashar Aliabbasi

You can make your divHTML code and set it directly into body(Or any element) with following code:

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

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

回答by Luís Ramalho

The modern way is to use ParentNode.append(), like so:

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

回答by Sayanjyoti Das

The best and better way is to create an element and append it to the bodytag. Second way is to first get the innerHTMLproperty of bodyand add code with it. For example:

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

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

回答by Poussy

Here's a really quick trick: Let's say you wanna add p tag inside div tag.

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

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

And that's it.

就是这样。