Saf JavaScript'te bir ışık kutusu oluşturuyorum. Bunun için bir kaplama yapıyorum. Bu kaplamayı gövdeye eklemek istiyorum ancak içeriği sayfada tutmak istiyorum. Geçerli kodum yer paylaşımı div'ı ekliyor, ancak aynı zamanda gövde içindeki geçerli içeriği de kaldırıyor. Div öğesi nasıl eklenir ve içeriği vücutta nasıl saklanır?

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

Şunu deneyin: -

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

kullanım

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

onun yerine

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

Düzenleme: - İdeal body.appendChildolarak değiştirmek yerine yöntemi kullanmalısınızinnerHTML

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 Kullanımı

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 kullanma

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

Her şeyi innerHTML ile değiştirmek yerine şunu deneyin:

document.body.appendChild(myExtraNode);

tüm çözümleri tek bir yerde bir araya getirerek @Peter T görevini geliştirmek.

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

Kullanılması XPathDOM Ağacında Unsuru konumunu bulmak ve bir XPath_Element belirtilen bir pozisyonda belirtilen metin eklemek. bu kodu tarayıcı konsolu üzerinden deneyin.

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

Yapmayı dene

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

Eğer yapabilirsiniz divHTML kodu ve doğrudan ayarlayın bodyaşağıdaki kodla (Veya herhangi eleman):

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

Modern yol şu şekilde kullanmaktır 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);

En iyi ve daha iyi yol bir öğe oluşturmak ve onu bodyetikete eklemektir. İkinci yol ilk olarak innerHTMLözelliğini almak bodyve onunla kod eklemektir. Örneğin:

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

İşte size hızlı bir numara: diyelim ki div etiketinin içine p etiketi eklemek istiyorsunuz.

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

Ve bu kadar.