Méthode : HTMLElement.insertBefore()

Ajoute un nouvel élément HTML sur l'objet parent avant l'élément position

Syntaxe
HTMLElement parent.insertBefore(HTMLElement newElement, HTMLElement posElement)

Compatible tous navigateurs

Oui

Description
Ajoute dans le DOM l'objet HTML newElement sur l'objet parent juste avant l'élément posElement.

Il n'existe pas de fonction insertAfter(), mais il est possible de la remplacer grâce à nextSibling().

La méthode appendChild() ajoute un nouvel élément à la fin d'un élément parent.

Equivalent dans d'autres langages

Equivalent en jQuery à $.before() :

Ajoute un nouvel élément dans le DOM.

Exemple 1 : Ajouter un élément HTML avant une position

Code source

<div id="album">
<img src="media/chiot.jpg" height="200" title="Le plus beau chien du monde">
</div>
<script type="text/javascript">
var album=document.getElementById("album");
var photo=album.querySelector("img");

var legende=document.createElement("div");
legende.innerHTML=photo.getAttribute("title");
album.insertBefore(legende, photo);
</script>

Résultat