it-swarm.com.de

Wie füge ich einBefore () -Element in ein Body-Tag ein?

Ich versuche insertBefore in js wie folgt zu verwenden:

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

Aber das würde das letzte p-Element kurz vor dem Ende des body-Tags hinzufügen. Wie könnte ich es verwenden, damit es beim Öffnen nach oben eingefügt wird? Das letzte hinzugefügte Element ist also das erste Element innerhalb des Body-Tags.

Ich habe es versucht:

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

Aber Firebug zeigt:

Knoten wurde nicht gefunden "code:" 8

46
slemdx

Sie können das erste untergeordnete Element des Elements body mit der Eigenschaft firstChild abrufen. Verwenden Sie es dann als Referenz.

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

Ich habe deinen Code aus Gründen modernisiert :)

77
alex
document.body.prepend(p);

Dies ist eine Neuerung in (wahrscheinlich) ES7. Es ist Vanilla JS und ist lesbarer als frühere Optionen. Es ist derzeit in 83% der Browser verfügbar, einschließlich Chrome, FF und Opera.

Sie können Zeichenfolgen direkt voranstellen, obwohl es sich nicht um "p" -Tags handelt

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

Links: developer.mozilla.org - Polyfill

6
Gibolt

Sie müssen vor etwas einfügen. document.getElementsByTagName('body')[0]is das body-Element (die Syntax ist ein Trick, um das body-Element in allen Browsern abzurufen)1. Wenn Sie in den Körper einfügen möchten, möchten Sie vor dem ersten Element davon einfügen. Das könnte so aussehen:

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

1in einigen Browsern ist es document.body, andere document.documentElement etc., aber in allen Browsern ist der Tagname body

2
KooiInc