ฉันกำลังสร้างกล่องไฟในจาวาสคริปต์ที่บริสุทธิ์ สำหรับสิ่งที่ฉันทำซ้อนทับ ฉันต้องการเพิ่มการซ้อนทับนี้ลงในเนื้อความ แต่ฉันต้องการเก็บเนื้อหาไว้ในหน้าด้วย รหัสปัจจุบันของฉันเพิ่ม 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>';
}

ลองใช้ดู: -

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

แทนที่จะลองเปลี่ยนทุกอย่างด้วย innerHTML:

document.body.appendChild(myExtraNode);

ปรับปรุงการโพสต์ของ @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หาตำแหน่งขององค์ประกอบใน Tree 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);

ลองทำดู

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

คุณสามารถสร้างdivโค้ด HTML ของคุณและตั้งเป็นโดยตรงbody(หรือองค์ประกอบใด ๆ ) ด้วยรหัสต่อไปนี้:

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

วิธีที่ทันสมัยคือการใช้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);

วิธีที่ดีที่สุดและดีกว่าคือการสร้างองค์ประกอบและผนวกเข้ากับbodyแท็ก วิธีที่สองคือการได้รับinnerHTMLคุณสมบัติแรกbodyและเพิ่มรหัสด้วย ตัวอย่างเช่น:

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

นี่เป็นเคล็ดลับสั้น ๆ : สมมติว่าคุณต้องการเพิ่มแท็ก p ภายในแท็ก div

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

และนั่นคือมัน