Comment insérer une balise div en tant que premier élément dans un conteneur avec JavaScript

Question

J'ai créé une div avec Javascript, cela s'affiche correctement, mais ce n'est pas à l'endroit où je veux, je voudrais le mettre à l'intérieur d'un conteneur en tant que premier élément. Je ne suis pas très bon, j'essaie d'apprendre, donc désolé pour la trivialité de la question.

Comment puis-je placer la div que j'ai créée à l'intérieur d'un conteneur déjà existant en tant que premier élément ?

En outre, j'aimerais comprendre la logique de l'opération, par exemple, comment puis-je déplacer la nouvelle div en tant que dernier élément ? Ou en tant que deuxième élément ?

Voici le code Js

// Ajouter un nouvel élément
var newEl = document.createElement("div");
var text = document.createTextNode("Bonjour");
   newEl.appendChild(text);
   var element = document.getElementById("main_container");
   element.appendChild(newEl);

Voici ce que j'essaie de réaliser

   Bonjour
   Un
   Deux
   Trois

Voici ce que j'ai pour l'instant

   Un
   Deux
   Trois

Bonjour

Answer 1

Ceci devrait fonctionner :

element.insertBefore(newEl, element.firstChild)

Answer 2

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

Dans votre cas:

element.insertBefore(newEl, element.firstChild)

Si vous souhaitez insérer à un index différent, vous pouvez le faire comme ceci:

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

Codepen