J'ai l'élément E et j'y ajoute quelques éléments. Tout à coup, je découvre que l'élément suivant devrait être le premier enfant de E. Quel est le truc, comment le faire? La méthode unshift ne fonctionne pas car E est un objet, pas un tableau.
Le long chemin serait d'itérer les enfants de E et de les déplacer key ++, mais je suis sûr qu'il y a une plus jolie manière.
Réponses:
la source
Version 2017
Vous pouvez utiliser
De MDN :
Également dans la famille des
insertAdjacent
méthodes fraternelles:element.insertAdjacentHTML('afterbegin','htmlText')
pour injecter directement une chaîne html, commeinnerHTML
mais sans tout remplacer, vous pouvez donc sauter un processus oppressifdocument.createElement
et même construire un composant entier avec un processus de manipulation de chaîneelement.insertAdjacentText
pour injecter la chaîne de désinfection dans l'élément. Pas plusencode/decode
la source
element
typeofdocument-fragment
que pasinsertAdjacent...()
. jusqu'à ce que nous ayons une meilleure réponse, votre meilleure supposition est d'ajouter lefragment
à adiv
. faites votre manipulation dom puis utilisezRange.selectNodeContents()
etRange.extractContents()
pour récupérer un fragmentVersion 2018
C'est JS moderne! Il est plus lisible que les options précédentes. Il est actuellement disponible dans Chrome, FF et Opera.
PS Vous pouvez directement ajouter des chaînes
developer.mozilla.org
Puis-je utiliser - 94% mai 2020
Polyfill
la source
.appendChild()
mais l'ajouter au début est.prepend()
au lieu de s'en tenir à la convention et de l'appeler.prependChild()
append()
existe aussi, fonctionne de la même manière queprepend()
, mais à la finprepend
en œuvre alors que je trouvais que c'était déjà ça. :( Ok, ça n'existait pas dans le passé.Vous pouvez l'implémenter directement dans tous vos éléments html de fenêtre.
Comme ça :
la source
prepend
est l'équivalent JS vanille, sans avoir besoin d'un prototype. Il sera standard dans ES7, et vous devriez utiliser si possible pour votre applicationRéponse acceptée refactorisée en fonction:
la source
eElement
que cela a de sens. Et pour cela, je dois lire la question. La plupart du temps, je vérifie simplement le titre et je vais directement à la réponse, en ignorant les détails de la question.Sauf si j'ai mal compris:
Ou
Bien qu'il semble que d'après votre description il y ait une condition attachée, donc
la source
Je pense que vous recherchez la fonction .prepend dans jQuery. Exemple de code:
la source
J'ai créé ce prototype pour ajouter des éléments à l'élément parent.
la source
https://www.w3schools.com/jsref/met_node_insertbefore.asp
la source