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" class="something">
   <div class="new_element">Hello</div>
   <div class="item">One</div>
   <div class="item">Two</div>
   <div class="item">Three</div>
</div>

This is what I got for now

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

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" class="something">
   <div class="new_element">Hello</div>
   <div class="item">One</div>
   <div class="item">Two</div>
   <div class="item">Three</div>
</div>

This is what I got for now

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

• javascript
• html
• jquery
• css

• 2 Look into Node.insertBefore() – mykaf Commented Aug 11, 2022 at 19:03

2 Answers 2

This should work:

element.insertBefore(newEl, element.firstChild)

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

Codepen