web-dev-qa-db-fra.com

Ajout d'un élément div au corps ou au document en JavaScript

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

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 méthode body.appendChild au lieu de changer le 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);
109
Aditya Singh

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

Utiliser jQuery

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

amélioration de la publication de @Peter T, en regroupant toutes les solutions au même 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}";
}

En utilisant XPath , recherchez la position de l'élément dans l'arborescence DOM et insérez le texte spécifié à une position spécifiée dans un élément 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);
10
Yash

Essayer de faire

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

La meilleure méthode consiste à créer un élément et à l’ajouter à la balise body . La deuxième méthode consiste à obtenir d’abord la propriété innerHTML de body et à y ajouter du code. Par exemple:

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

Vous pouvez créer votre code HTML div et le définir directement dans body (Ou tout élément) avec le code suivant:

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