Saya membuat kotak cahaya di JavaScript murni. Untuk itu saya membuat overlay. Saya ingin menambahkan hamparan ini ke tubuh tetapi saya juga ingin menjaga konten di halaman. Kode saya saat ini menambahkan overlay div tetapi juga menghapus isi saat ini di tubuh. Bagaimana cara menambahkan elemen div dan menyimpan konten di badan?

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

Coba ini: -

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

Menggunakan

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

dari pada

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

Sunting: - Idealnya Anda harus menggunakan body.appendChildmetode alih-alih mengubahinnerHTML

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

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

Menggunakan jQuery

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

Alih-alih mengganti semuanya dengan innerHTML coba:

document.body.appendChild(myExtraNode);

memperbaiki posisi @Peter T, dengan mengumpulkan semua solusi bersama di satu tempat.

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

Menggunakan XPathmenemukan posisi Elemen di Pohon DOM dan masukkan teks yang ditentukan pada posisi yang ditentukan ke XPath_Element. coba kode ini melalui konsol browser.

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

Coba lakukan

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

Anda dapat membuat divkode HTML dan mengaturnya langsung ke body(Atau elemen apa pun) dengan kode berikut:

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

Cara modern adalah menggunakan ParentNode.append(), seperti:

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

Cara terbaik dan lebih baik adalah membuat elemen dan menambahkannya ke bodytag. Cara kedua adalah pertama mendapatkan innerHTMLproperti bodydan menambahkan kode dengannya. Sebagai contoh:

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

Ini trik yang sangat cepat: Katakanlah Anda ingin menambahkan tag p di dalam tag div.

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

Dan itu saja.