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

Insertion d'éléments après d'autres en JavaScript sans bibliothèque

En JavaScript, la méthode insertBefore() existe pour insérer un élément avant une référence spécifiée nœud. Cependant, que se passe-t-il si vous souhaitez insérer un élément après un autre élément sans compter sur jQuery ou d'autres bibliothèques ?

Réponse

L'extrait suivant est ce dont vous avez besoin :

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

Voici comment cela fonctionne :

• referenceNode représente le nœud après lequel vous souhaitez insérer le nouveau nœud (newNode).
• referenceNode.parentNode obtient le nœud parent du referenceNode.
• referenceNode.nextSibling identifie le prochain frère du referenceNode. Si le referenceNode est le dernier enfant, nextSibling sera nul. Ce cas est géré de manière appropriée par insertBefore(), qui s'ajoute à la fin de la liste des enfants.

Exemple de code

Pour utiliser cette solution, vous pouvez définir la fonction suivante :

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

Vous pouvez ensuite utiliser cette fonction comme donc :

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

Ce code insérera l'élément span avec le texte "test" après le div avec l'identifiant "foo".

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!