Tôi đang tạo một hộp đèn trong JavaScript thuần túy. Cho rằng tôi đang làm một lớp phủ. Tôi muốn thêm lớp phủ này vào cơ thể nhưng tôi cũng muốn giữ nội dung trên trang. Mã hiện tại của tôi thêm div lớp phủ nhưng nó cũng loại bỏ nội dung hiện tại trong cơ thể. Làm thế nào để thêm phần tử div và giữ nội dung trên cơ thể?

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

Thử thứ này đi:-

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

Sử dụng

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

thay vì

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

Chỉnh sửa: - Tốt nhất bạn nên sử dụng body.appendChildphương pháp thay vì thay đổiinnerHTML

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

Sử dụng 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);

Sử dụng jQuery

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

Thay vì thay thế mọi thứ bằng InternalHTML, hãy thử:

document.body.appendChild(myExtraNode);

cải thiện bài đăng của @Peter T, bằng cách tập hợp tất cả các giải pháp lại với nhau tại một nơi.

Element.insertAdjiềnHTML ()

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

Sử dụng XPathtìm vị trí của Phần tử trong Cây DOM và chèn văn bản đã chỉ định vào vị trí đã chỉ định vào XPath_Euity. thử mã này trên bảng điều khiển trình duyệt.

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

Hãy thử làm

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

Bạn có thể tạo divmã HTML của mình và đặt mã trực tiếp vào body(Hoặc bất kỳ yếu tố nào) với mã sau:

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

Cách hiện đại là sử dụng ParentNode.append(), như vậy:

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

Cách tốt nhất và tốt hơn là tạo một yếu tố và gắn nó vào bodythẻ. Cách thứ hai là trước tiên lấy innerHTMLtài sản của bodyvà thêm mã với nó. Ví dụ:

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

Đây là một mẹo thực sự nhanh chóng: Giả sử bạn muốn thêm thẻ p vào thẻ div.

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

Và đó là nó.