How to insert a div as the first element in a container with JavaScript-CodePudding

I have created a div with Javascript, this displays correctly, however it is not in the place where I want, I would like to put it inside a container as the first element. I'm not very good, I'm trying to learn, so sorry for the triviality of the question.

How do I put the div I created inside an already existing container as the first element?

Beyond that I would like to understand the logic of the operation, for example, how can I move the new div as the last element? Or as a second element ?

This is the Js code

// Add New Element
var newEl = document.createElement("div");
var text = document.createTextNode("Hello");
   newEl.appendChild(text);
   var element = document.getElementById("main_container");
   element.appendChild(newEl);

This is what I am trying to achieve

<div id="main_container" >
   <div >Hello</div>
   <div >One</div>
   <div >Two</div>
   <div >Three</div>
</div>

This is what I got for now

<div id="main_container" >
   <div >One</div>
   <div >Two</div>
   <div >Three</div>
</div>
<div>Hello</div>

CodePudding user response：

const parent;
const newFirstChild;
parent.insertBefore(newFirstChild, parent.firstChild);

In your case:

element.insertBefore(newEl, element.firstChild)

If you want to insert at a different index you can do it like this:

parent.insertBefore(newEl, parent.children[2])

CodePudding user response：

This should work:

element.insertBefore(newEl, element.firstChild)