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

élément 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!

JavaScript jquery NULL if while using function dom this Other

Déclaration：

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