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

Answer 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 :)

Answer 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