Comment insérer un élément après l'autre en JavaScript sans utiliser de bibliothèques ?

Insérer un élément après l'autre en JavaScript sans bibliothèques externes

Dans le domaine de JavaScript, les programmeurs cherchent souvent à manipuler des éléments dans le DOM. Bien que jQuery et d'autres bibliothèques simplifient ces tâches, il est possible de réaliser l'insertion d'éléments sans dépendre de dépendances externes.

Question :

Comment un élément peut-il être inséré après un autre élément en JavaScript sans l'aide de bibliothèques comme jQuery ?

Réponse :

Pour insérer un élément après un nœud existant, JavaScript fournit la méthode insertBefore(). Cependant, contrairement à l'objectif principal de insertBefore() qui consiste à insérer avant un nœud de référence, nous pouvons l'exploiter pour atteindre notre objectif.

L'extrait suivant montre comment :

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

où :

• referenceNode représente l'élément après lequel vous souhaitez insérer le nouvel élément
• parentNode récupère l'élément parent du nœud de référence
• nextSibling fait référence à l'élément immédiatement après le nœud de référence. Si le nœud de référence est le dernier enfant, nextSibling sera nul et insertBefore() gérera ce cas en l'ajoutant à la fin de la liste.

Exemple de fonction :

Une fonction concise peut être créée pour encapsuler cette opération :

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

Test du Fonction :

Pour valider notre code, nous pouvons utiliser l'extrait suivant :

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

var el = document.createElement("span");
el.innerHTML = "test";
var div = document.getElementById("foo");
insertAfter(div, el);

Ce code insérera un test élément après l'élément