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>
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])
This should work:
element.insertBefore(newEl, element.firstChild)