Création d'une fonction insertAfter pour javascript

2017-07-19

web Hadock 2017-07-19

Pour insérer un élément  après un autre, on va d'abord récupérer l'élément parent. C'est logique, puisque l'insertion de l'élément va se faire soit via appendChild(), soit via insertBefore(). 

Si on veut ajouter notre élément après le dernier enfant, il suffit d'appliquer appendChild().

Par contre, si l'élément après lequel on veut insérer notre élément n'est pas le dernier, on va utiliser insertBefore() en ciblant l'enfant suivant, avec nextSibling.

 

function insertAfter(newElement, afterElement) {
    var parent = afterElement.parentNode;
	
    if (parent.lastChild === afterElement) { // Si le dernier élément est le même que l'élément après lequel on veut insérer, il suffit de faire appendChild()
        parent.appendChild(newElement);
    } else { // Dans le cas contraire, on fait un insertBefore() sur l'élément suivant
        parent.insertBefore(newElement, afterElement.nextSibling);
    }
}