Déplacement d'un div de l'intérieur d'un div à un autre div en utilisant Prototype?

Question

Dans un Javascript compatible avec le prototype ou le normal-mais-cross-browser, comment déplacer le contenu d'une div vers le contenu d'une autre div?

A l'intérieur de la div est une forme avec des identifiants et un code Javascript dépendant avec des observateurs d'événements. Je ne veux pas que ça casse juste parce que j'ai déplacé un bloc dans le DOM. Une solution 'innerHTML = that innerHTML' n'est pas ce que je cherche. Je vais aussi avoir besoin de faire cela lorsque le DOM est chargé.

Je veux aller de ceci:

<div id='here'> 
    <div id='MacGuffin'> 
    <p>Hello Worlds!</p> 
    </div> 
</div> 
<div id='there'> 
</div> 

à ceci:

<div id='here'> 
</div> 
<div id='there'> 
    <div id='MacGuffin'> 
    <p>Hello Worlds!</p> 
    </div> 
</div> 

... lorsque les charges de documents avec rien sautant.

Answer 1

Vous pouvez ajouter cela à la fin de la balise BODY:

<script> 
    document.getElementById('there').appendChild(
    document.getElementById('MacGuffin') 
); 
</script> 

MacGuffin seront déplacés automatiquement de l'un à l'autre.
Et il n'y aura pas de scintillement.

Answer 2

Pour déplacer le contenu de here dans there, vous êtes essentiellement après:

$('there').insert($('here').childNodes); 

Malheureusement, cela ne fonctionne pas.

Comme pour les deux autres réponses, il semble que vous deviez recourir à du JavaScript simple avec un prototype fournissant seulement un raccourci pour document.getElementById.

var frag = document.createDocumentFragment(); 
for (var c = $('nav').firstChild, n; c; c = n) { 
    n = c.nextSibling; 
    frag.appendChild(c); 
} 
$('header').appendChild(frag); 

(Voir John Démission du blog pour les statistiques de performance sur DocumentFragments: http://ejohn.org/blog/dom-documentfragments/)

Answer 3

Pour déplacer le contenu de here dans there, cela fonctionne, tant que here enserre tout ce que vous voulez déplacer, comme un <div>:

$('there').insert($('here').descendants()[0]); 

descendants() retourne un tableau, et l'insert prend le contenu, afin d'utiliser la premier élément.

Answer 4

Peut-être pas un point majeur, mais il n'y a pas de méthode d'interface Javascript intégrée de Node.migrateChild(). Si un fragment a déjà un parent ailleurs dans le DOM (comme div id = 'MacGuffin' le fait dans le balisage d'exemple ci-dessus), appendChild() détache tranquillement le fragment d'argument de tout parent courant avant de le rattacher au nouveau parent. Dans mon esprit migrateChild() serait un nom de méthode significativement sémantiquement plus que appendChild(), moins besoin de recherches de développeur StackOverflow pour faire allusion à ses capacités plus puissantes.