Question

I am currently appending a node to the end of a div to dynamically add to a div but I am looking to append it to the beginning rather than the end of the div.

my current code looks like this:

var para=document.createElement('div');

var node=document.createTextNode('this is new');
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);


<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

How can I append to the beginning of the div?

Answer 1

You can use insertBefore() with the parent’s firstChild as the reference element:

var element = document.getElementById("div1");
element.insertBefore(para, element.firstChild);