Il y a insertBefore()
en JavaScript, mais comment puis-je insérer un élément après un autre élément sans utiliser jQuery ou une autre bibliothèque?
javascript
dom
insert
append
Xah Lee
la source
la source
Réponses:
Où se
referenceNode
trouve le nœud que vous souhaitez placernewNode
. SireferenceNode
est le dernier enfant de son élément parent, c'est parfait, carreferenceNode.nextSibling
seranull
etinsertBefore
gère ce cas en ajoutant à la fin de la liste.Donc:
Vous pouvez le tester à l'aide de l'extrait de code suivant:
la source
insertBefore()
fonctionne avec des nœuds de texte. Pourquoi voulez-vousinsertAfter()
être différent? Vous devez créer une paire de fonctions distincte nomméeinsertBeforeElement()
etinsertAfterElement()
pour cela.Le JavaScript simple serait le suivant:
Ajouter avant:
Ajouter après:
Mais, jetez quelques prototypes là-dedans pour en faciliter l'utilisation
En construisant les prototypes suivants, vous pourrez appeler ces fonctions directement à partir des éléments nouvellement créés.
newElement.appendBefore(element);
newElement.appendAfter(element);
Prototype .appendBefore (élément)
Prototype .appendAfter (élément)
Et, pour tout voir en action, exécutez l'extrait de code suivant
Afficher l'extrait de code
Exécutez-le sur JSFiddle
la source
existingElement.appendAfter(newElement);
. Voyez ce que je veux dire à ce jsfiddle mis à jour .insertAdjacentHTML
+outerHTML
Avantages:
insertBefore
(seuil de rentabilité même si le nom de variable de nœud existant est long de 3 caractères)Inconvénients:
outerHTML
convertit l'élément en chaîne. Nous en avons besoin car ilinsertAdjacentHTML
ajoute du contenu à partir de chaînes plutôt que d'éléments.la source
.insertAdjacentElement()
Une recherche rapide sur Google révèle ce script
la source
targetElement.nextSibling
retourneranull
. Lorsquenode.insertBefore
est appelé avecnull
comme deuxième argument, il ajoutera le nœud à la fin de la collection. En d'autres termes, laif(parent.lastchild == targetElement) {
branche est superflue, carparent.insertBefore(newElement, targetElement.nextSibling);
elle traitera correctement tous les cas, même si elle peut sembler différente au premier abord. Beaucoup l'ont déjà souligné dans d'autres commentaires.Cependant
insertBefore()
(voir MDN ) est génial et référencé par la plupart des réponses ici. Pour plus de flexibilité et pour être un peu plus explicite, vous pouvez utiliser:insertAdjacentElement()
(voir MDN ) Cela vous permet de référencer n'importe quel élément et d'insérer l'élément à déplacer exactement où vous le souhaitez:D'autres à considérer pour des cas d'utilisation similaires:
insertAdjacentHTML()
etinsertAdjacentText()
Références:
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML https: // developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText
la source
La méthode
node.after
( doc ) insère un nœud après un autre nœud.Pour deux nœuds DOM
node1
etnode2
,node1.after(node2)
insèrenode2
aprèsnode1
.Cette méthode n'est pas disponible dans les anciens navigateurs, donc généralement un polyfill est nécessaire.
la source
Solution 2018 (mauvaise pratique, passez à 2020)
Je sais que cette question est ancienne, mais pour tous les futurs utilisateurs, voici un prototype modifié, ce n'est qu'un micro-remplissage pour la fonction .insertAfter qui n'existe pas, ce prototype ajoute directement une nouvelle fonction
baseElement.insertAfter(element);
au prototype Element:Une fois que vous avez placé le polyfill dans une bibliothèque, un résumé ou simplement dans votre code (ou n'importe où ailleurs où il peut être référencé)
document.getElementById('foo').insertAfter(document.createElement('bar'));
Solution 2019 (moche, passez à 2020)
Nouvelle édition: VOUS NE DEVEZ PAS UTILISER DE PROTOTYPES. Ils écrasent la base de code par défaut et ne sont pas très efficaces ou sûrs et peuvent provoquer des erreurs de compatibilité, mais si c'est pour des projets non commerciaux, cela ne devrait pas avoir d'importance. si vous voulez une fonction sûre pour une utilisation commerciale, utilisez simplement une fonction par défaut. ce n'est pas joli mais ça marche:
Solution 2020
Normes Web actuelles pour ChildNode: https://developer.mozilla.org/en-US/docs/Web/API/ChildNode
Son actuellement dans le niveau de vie et est sûr.
Pour les navigateurs non pris en charge, utilisez ce Polyfill: https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js
Quelqu'un a mentionné que le Polyfill utilise Protos, quand j'ai dit que c'était une mauvaise pratique. Ils le sont, surtout lorsqu'ils sont mal utilisés, comme ma solution pour 2018. Cependant, ce polyfill est sur la documentation MDN et utilise une sorte d'initialisation et d'exécution qui est plus sûre. De plus, c'est pour la prise en charge de navigateurs plus anciens, à l'époque où l'écrasement de prototypes n'était pas si mal.
Comment utiliser la solution 2020:
la source
Ou vous pouvez simplement faire:
la source
la source
La méthode insertBefore () est utilisée comme
parentNode.insertBefore()
. Donc, pour imiter cela et créer une méthode,parentNode.insertAfter()
nous pouvons écrire le code suivant.Javascript
HTML
Notez que l'extension du DOM peut ne pas être la bonne solution pour vous, comme indiqué dans cet article .
Cependant, cet article a été écrit en 2010 et les choses pourraient être différentes maintenant. Alors décidez par vous-même.
Méthode JavaScript insertAfter () DOM @ jsfiddle.net
la source
Idéalement, il
insertAfter
devrait fonctionner de manière similaire à insertBefore . Le code ci-dessous effectuera les opérations suivantes:Node
est ajoutéNode
, le nouveauNode
est ajoutéNode
après la référenceNode
, le nouveauNode
est ajoutéNode
a un frère après, le nouveauNode
est inséré avant ce frèreNode
Extension
Node
Un exemple courant
Voir le code en cours d'exécution
Afficher l'extrait de code
la source
Je sais que cette question a déjà beaucoup trop de réponses, mais aucune ne répond à mes exigences exactes.
Je voulais une fonction qui a le comportement exactement opposé de
parentNode.insertBefore
- c'est-à-dire qu'elle doit accepter un nullreferenceNode
(ce que la réponse acceptée ne fait pas) et oùinsertBefore
insérer à la fin des enfants celui-ci doit insérer au début , car sinon il ' d aucun moyen d'insérer à l'emplacement de départ avec cette fonction; la même raisoninsertBefore
insère à la fin.Puisqu'un null
referenceNode
vous oblige à localiser le parent, nous devons connaître le parent -insertBefore
est une méthode de laparentNode
, donc il a accès au parent de cette façon; notre fonction ne fonctionne pas, nous devons donc passer le parent comme paramètre.La fonction résultante ressemble à ceci:
Ou (si vous le devez, je ne le recommande pas), vous pouvez bien sûr améliorer le
Node
prototype:la source
Ce code permet d'insérer un élément de lien juste après le dernier enfant existant pour insérer un petit fichier CSS
la source
Vous pouvez utiliser
appendChild
fonction pour insérer après un élément.Référence: http://www.w3schools.com/jsref/met_node_appendchild.asp
la source
une implémentation robuste de insertAfter.
};
la source
Permet de gérer tous les scénarios
la source
la source
Vous pouvez en fait utiliser une méthode appelée
after()
dans une version plus récente de Chrome, Firefox et Opera. L'inconvénient de cette méthode est qu'Internet Explorer ne la prend pas encore en charge.Exemple:
Un code HTML simple à tester qui est:
Comme prévu, il déplace l'élément vers le haut après l'élément vers le bas
la source