web-dev-qa-db-fra.com

Comment insérer l'élémentBefore () dans la balise body?

J'essaie d'utiliser insertBefore dans js comme ceci:

var p = document.createElement("p");
p.innerHTML = "test1";
document.body.insertBefore(p, null);

var p = document.createElement("p");
p.innerHTML = "test2";
document.body.insertBefore(p, null);

Mais cela ajouterait le dernier élément p juste avant la fermeture de la balise body, comment pourrais-je l'utiliser pour qu'il soit ajouté en haut à l'ouverture? Le dernier élément ajouté sera donc le premier élément à l'intérieur de la balise body.

J'ai essayé:

document.body.insertBefore(p, document.getElementsByTagName('body')[0]);

Mais Firebug montre:

Le noeud n'a pas été trouvé "code:" 8

javascriptdominsertgetelementsbytagname
46
slemdx

Vous pouvez obtenir le premier enfant de l'élément body avec la propriété firstChild. Utilisez-le ensuite comme référence.

const p = document.createElement("p");
p.textContent = "test1";
document.body.insertBefore(p, document.body.firstChild);

J'ai modernisé votre code pour des raisons :)

77
alex
document.body.prepend(p);

Il s'agit d'un nouvel ajout dans (probablement) ES7. Il s'agit de Vanilla JS et est plus lisible que les options précédentes. Il est actuellement disponible dans 83% des navigateurs , y compris Chrome, FF et Opera.

Vous pouvez ajouter directement des chaînes, bien qu'il ne s'agisse pas de balises "p"

document.body.prepend('This text!');

Liens: developer.mozilla.org - Polyfill

6
Gibolt

Vous devez insérer avant quelque chose. document.getElementsByTagName('body')[0]is l'élément body (la syntaxe est un peu une astuce pour obtenir l'élément body dans tous les navigateurs)1. Si vous souhaitez insérer dans le corps, vous souhaitez insérer avant le premier élément de celui-ci. Cela pourrait ressembler à ceci:

var body   = document.body || document.getElementsByTagName('body')[0],
    newpar = document.createElement('p');
newpar.innerHTML = 'Man, someone just created me!';
body.insertBefore(newpar,body.childNodes[0]);

1dans certains navigateurs, c'est document.body, autre document.documentElement etc., mais dans tous les navigateurs, la variable est body

2
KooiInc