Comment insérer des éléments après d'autres éléments en JavaScript ?

Insérer des éléments après d'autres en JavaScript

L'insertion d'éléments après des nœuds existants est une opération courante en JavaScript. Cependant, bien qu'il existe la méthode insertBefore(), elle ne peut ajouter des éléments qu'avant un nœud de référence. Pour insérer des éléments après, nous avons besoin d'une approche alternative.

Solution sans bibliothèques

Pour insérer un élément après un autre sans utiliser de bibliothèques, nous pouvons utiliser le code suivant :

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

Voici une répartition :

• referenceNode : L'élément après lequel nous voulons insérer le new node.
• parentNode : L'élément parent de referenceNode.
• nextSibling : Le prochain frère de referenceNode, qui sera nul si referenceNode est le dernier enfant.

Si referenceNode est le dernier enfant, le nextSibling sera nul. insertBefore gère ce cas en ajoutant le nouveau nœud à la fin de la liste.

Fonction réutilisable

Nous pouvons envelopper cette fonctionnalité dans une fonction réutilisable :

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

Exemple

Pour tester cette fonction, nous pouvons utiliser ce qui suit extrait :

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);

Cela créera un nouvel élément span avec le texte "test" et l'insérera après l'élément div avec l'ID "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!