Comment insérer After() en JavaScript sans utiliser une bibliothèque ?

Question

Il y a `` en JavaScript, mais comment insérer après un élément sans utiliser jQuery ou autre bibliothèque ?

Answer 1

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

Où referenceNode est le nœud que vous souhaitez mettre newNode après. Si referenceNode est le dernier enfant dans son élément parent, c'est très bien, parce qu' referenceNode.nextSibling sera null et insertBefore des poignées de cas par l'ajout, à la fin de la liste.

Donc:

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

Essayer ici.

Answer 2

insertAdjacentHTML + outerHTML peut être une option:

elementBefore.insertAdjacentHTML('afterEnd', elementAfter.outerHTML)

Avantages:

• Sèche-linge: vous n'avez pas à stocker l'avant nœud dans une variable et de l'utiliser deux fois. Si vous renommez la variable, moins l'événement à modifier.
• golfs mieux que l' insertBefore (pause, même si le nœud existant nom de la variable est de 3 caractères)

Inconvénients:

• inférieur de la prise en charge du navigateur
• perdra les propriétés de l'élément, telles que des événements, car outerHTML convertit l'élément d'une chaîne de caractères. Nous en avons besoin car insertAdjacentHTML ajoute du contenu à partir de chaînes de caractères plutôt que des éléments.

Answer 3

Une rapide recherche sur Google révèle ce script