How to insertBefore() element in body tag?

Question

I am trying to use insertBefore in js like this:

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

But that would add the last p element just before the close of the body tag, how could I use it so it will be added to the top when it opens? So the last element added will be the first element inside the body tag.

I tried:

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

But firebug shows:

Node was not found" code: "8

Solution 1

You can get the first child of the body element with the firstChild property. Then use it as the reference.

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

I modernized your code for reasons :)

Solution 2

Modern Solution - prepend

document.body.prepend(p)

This is vanilla JS and is more readable than previous options. It is currently available in all modern browsers.

You can directly prepend strings, although they won't be 'p' tags

parent.prepend("This text!")

Related DOM methods

1. Read More - parent.append
2. Read More - child.before and child.after
3. Read More - child.replaceWith

Mozilla Documentation

Solution 3

You have to insert before something. document.getElementsByTagName('body')[0] is the body element (the syntax is a bit of a trick to get the body element in all browsers)¹. If you want to insert into the body, you want to insert before the first element of it. That could look like this:

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

¹ in some browsers it's document.body, other document.documentElement etc., but in all browsers the tagname is body

Comments

[user3167101]

Which browsers don't support document.body?

[KooiInc]

@alex you're right, every browser seems to support it. I think it's a trace in my memory from a long gone past.

[user3167101]

@Kooilnc Thanks for getting back to me, I have a lot of document.body in the wild and was a little worried :P

[Persijn]

You should not push text to an element with innerHTML. Use textContet instead.

[user3167101]

@Persijn It was for an example only, and back in 2011 you had to use textContent or innerText in IE, so this was more convenient.

[Persijn]

agread, but i commented it since we no longer do this. Could you change/edit it?

[user3167101]

@Persijn It's literally the code from the OP's question, but yes I can change it

[Persijn]

Don't we answers question for the community? And not for a single user? We are not a helping service.

[Dmitriy]

Thank you for this code snippet, which might provide some limited, immediate help. A proper explanation would greatly improve its long-term value by showing why this is a good solution to the problem and would make it more useful to future readers with other, similar questions. Please edit your answer to add some explanation, including the assumptions you’ve made