Je crée une boîte à lumière en pur JavaScript. Pour cela, je fais une superposition. Je souhaite ajouter cette superposition au corps, mais je souhaite également conserver le contenu de la page. Mon code actuel ajoute le div de superposition mais il supprime également le contenu actuel dans le corps. Comment ajouter un élément div et conserver le contenu sur le corps?

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

Essayez ceci: -

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

Utilisation

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

au lieu de

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

Edit: - Idéalement, vous devriez utiliser la body.appendChildméthode au lieu de changer leinnerHTML

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

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

Utilisation de jQuery

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

Au lieu de tout remplacer par innerHTML, essayez:

document.body.appendChild(myExtraNode);

améliorer le post de @Peter T, en rassemblant toutes les solutions en un seul endroit.

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

Utilisez XPathrechercher la position de l'élément dans l'arborescence DOM et insérez le texte spécifié à une position spécifiée dans un XPath_Element. essayez ce code sur la console du navigateur.

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

Essayez de faire

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

Vous pouvez créer votre divcode HTML et le définir directement dans body(Ou n'importe quel élément) avec le code suivant:

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

La manière moderne est d'utiliser ParentNode.append(), comme ceci:

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

Le meilleur et le meilleur moyen est de créer un élément et de l'ajouter à la bodybalise. La deuxième façon consiste à obtenir d'abord la innerHTMLpropriété de bodyet à ajouter du code avec elle. Par exemple:

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

Voici une astuce très rapide: disons que vous voulez ajouter la balise p à l'intérieur de la balise div.

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

Et c'est tout.