Y a-t-il un moyen de copier un élément sans copier ses enfants?
Mon objectif est de dupliquer une table, ainsi que de toutes les classes, des styles en ligne, etc. Mais je ne veux pas copier aucun des enfants de l'élément de table.
Je réalise que je pourrais copier la table entière, puis supprimer les enfants de la copie. Mais je veux minimiser le scintillement de l'écran et que je semble me rappeler, il y a des problèmes qui manipulent des éléments avant qu'ils ne soient visibles dans le DOM.
Toute suggestion?
3 Réponses :
Avez-vous envisagé d'utiliser Native clonenode code > ? L'argument contrôle si les enfants doivent également être clonés.
var clone = table.cloneNode(false);
Si vous voulez dire élément.style.fonttsize = ... Il sera ajouté à l'attribut de style afin qu'il soit cloné
En effet, il fait . Je n'étais pas sûr parce que la documentation MDN mentionne que les gestionnaires d'événements ne sont pas clonés non plus.
Merci. Jamais connu sur clonenode ()
En ce qui concerne les auditeurs, ceux-ci ajoutés en ligne (c'est-à-dire en tant qu'attributs HTML) sont clonés, de même que celles-ci ajoutées à l'aide de AttachEvent '/ i>. Mais celles-ci ajoutées en utilisant addeventlistener ou directement en tant que propriété ne sont pas (par le W3C Interface EventListener )
Utilisez .clonenode
Notez que dans les versions plus anciennes d'IE, TR ÉLÉMENTS DOIT ÊTRE AJOULÉ À UN ÉLÉMENT DE TABORE, pas à un élément de table. Une alternative consiste à créer l'AR utilisant Table .insertrow , qui ajoute une rangée au Todbon de la table ou en crée un s'il n'y en a pas déjà disponible.
C'est juste une autre façon de le faire, probablement la laidée si loin postée, mais j'ajoute simplement aux possibilités. Si c'était moi, j'utiliserais celui de Felix Kling .
Il obtient essentiellement le html fort> p> p> JS strud> p> CSS fort> p> outerhtml et innerhtml code> Sustractant une à l'autre: Table.Prop ('OUTERHTML'). Remplacez (Tableau.Prop ('innerhtml'), ''); code>. Voici un Démo . P> .some-class {
color: #00F
}
.another-class {
color: #00F;
font-size: 18px;
}
Clonage de la table entière, la vidant et alors l'ajouter au DOM ne doit pas causer de scintillement. Pouvez-vous reproduire la question de scintillement?
Vous pouvez cloner l'élément, enlever ses enfants, puis l'ajoutez à la DOM ... mais si vous clonez, ajoutez-le à DOM, puis supprimez les enfants pourraient causer un problème (au moins pourrait entraîner des performances sage)
@techfoobar: Cela peut être une très grande table. Cela causerait au moins un retard que je suis sûr. Je suis prêt à expérimenter avec le scintillement, mais je me souviens de rencontrer des problèmes d'essayer de manipuler des éléments qui n'étaient pas encore visibles. Souhaitez-vous rendre la table clonée visible tout en supprimant les enfants inutiles?
@Jonathanwood: Vous pouvez manipuler un nœud "déconnecté" comme s'il faisait partie du document. Il n'y a qu'une différence que si vous essayez d'obtenir des informations qui ne ressentent que lorsque l'élément fait partie du document, comme la position des coordonnées de l'écran. La plupart des méthodes de manipulation DOM fonctionnent de la même manière, peu importe.