Ajouter un élément div au corps ou au document en JavaScript

Question

Je crée une boîte à lumière en JavaScript pur. Pour cela, je crée une superposition. Je veux ajouter cette superposition au corps de la page mais je veux également conserver le contenu de la page. Mon code actuel ajoute la div de recouvrement mais il supprime également le contenu actuel de body. Comment ajouter un élément div et garder le contenu dans 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>';
}

Answer 1

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

Answer 2

Essayez ceci:-

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

Utilisez

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 body.appendChild au lieu de modifier la méthode 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);

Answer 3

Au lieu de tout remplacer par innerHTML, essayez :

document.body.appendChild(myExtraNode);

Answer 4

améliorer le poste 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}";
}

Utilisation de XPath trouver la position de l'élément dans l'arbre DOM et insérer 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"]';
var childHTML = '<div id="Yash">Hi My name is <B>\"YASHWANTH\"</B></div>';
var position = 'beforeend';
insertHTML_ByXPath(xpath_DOMElement, position, childHTML);

Answer 5

La méthode la plus sous-estimée est insertAdjacentElement . Vous pouvez littéralement ajouter votre HTML en utilisant une seule ligne.

document.body.insertAdjacentElement('beforeend', html)

Pour en savoir plus, cliquez ici. https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement