Maison > interface Web > js tutoriel > Comment insérer un élément après l'autre en JavaScript ?

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

Mary-Kate Olsen
Libérer: 2024-12-24 03:44:13
original
490 Les gens l'ont consulté

How to Insert an Element After Another in JavaScript?

Insérer un élément après un autre en JavaScript

Bien que JavaScript fournisse la méthode insertBefore() pour insérer un élément avant un autre, il n'y a pas de construction -in méthode pour insérer un élément après l'autre. Pour y parvenir, nous pouvons utiliser la technique personnalisée suivante :

Solution :

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
Copier après la connexion

Explication :

  • referenceNode : L'élément dans lequel vous souhaitez insérer le nouvel élément after.
  • newNode : Le nouvel élément à insérer.
  • parentNode : L'élément parent du nœud de référence.
  • nextSibling : Le nœud suivant le nœud de référence (ou null si c'est le dernier child).

insertBefore() prend deux arguments : le nouveau nœud à insérer et le nœud devant lequel le nouveau nœud doit être placé. En passant referenceNode.nextSibling, nous nous assurons que le nouveau nœud est inséré après le nœud de référence.

Exemple de fonction :

function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
Copier après la connexion

Utilisation :

var el = document.createElement("span");
el.innerHTML = "test";
var div = document.getElementById("foo");
insertAfter(div, el);
Copier après la connexion

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

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal