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


139

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

4
avez-vous essayé de l'ajouter comme: document.body.innerHTML = '<div style = "position: absolue; largeur: 100%; hauteur: 100%; opacité: 0.3; z-index: 100; background: # 000;" > </div> '+ document.body.innerHTML;
Ricky

Réponses:


160

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

18
Vous devez considérer que faire document.body.innerHTML = 'quelque chose' entraîne beaucoup de calculs inutiles car le navigateur a besoin d'analyser la chaîne 'quelque chose' et cela prend beaucoup dans une grande page. Une approche beaucoup plus performante consiste à créer le nouvel élément et à l'attacher au DOM. Vérifiez cette comparaison sur jsperf: jsperf.com/innerhtml-vs-appendchild2
fegemo

14
Cette approche aura également des effets secondaires indésirables. Par exemple, tous les événements liés sur les éléments enfants deviendront indépendants une fois que vous aurez défini à innerHTMLnouveau.
anoopelias

5
C'est certainement la mauvaise réponse ... la question demande d'ajouter un élément, pas de réécrire la page entière, voir JPH pour une meilleure alternative.
Christian

4
-1. C'est une manière terrible d'y parvenir. Si vous lisez ceci, n'utilisez pas cette solution lente et datée. Regardez la réponse de @ peter-t
MacroMan

3
Non seulement cela est lent, mais détruit les éléments précédents, de sorte que tous les écouteurs d'événements attachés à la page plus tôt sont perdus! Évitez à tout prix de faire cela. Utilisez plutôt appendChild.
Kranthi Kiran P

223

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

2
chose la plus étrange. au pire, javascript pur a toujours été le moyen de faire tout ce que je voulais faire.
Spencer Williams

3
Cela devrait être la réponse acceptée. C'est la seule réponse qui fonctionne correctement à ce sujet.
MacroMan

@MacroMan Même la version jquery? J'utilise jquery et j'aimerais le faire correctement de cette façon aussi. (Il suffit de s'assurer que sa réponse jquery n'est qu'une ligne et ne semble pas créer de nœud ou quoi que ce soit.)
felwithe

@felwithe La version jQuery est acceptable, mais vous souhaiterez peut-être créer un nœud à partir de zéro et appliquer les styles individuellement si vous avez besoin de plus de clarté dans votre code.
MacroMan

appendChild()et insertBefore()donnez encore plus de flexibilité sur l'emplacement de l'élément à insérer
averasko


12

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

2

Essayez de faire

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

2

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 meilleure et la plus simple. Merci!
Muhammad Ali le

1

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


0

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

3
Premièrement, vous pouvez accéder au corps de la page en faisant simplement document.body, deuxièmement, comme je l'ai déjà mentionné, ne pas réécrire la page entière juste pour ajouter un élément.
Christian

-2

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.