Le déplacement d'une div à l'intérieur d'un div à une autre div en utilisant le Prototype?

À l'état de prototype ou normal-mais-croix-navigateur compatible avec Javascript, comment puis-je déplacer le contenu d'un div pour le contenu d'un autre div?

À l'intérieur de la div est un formulaire avec des id et dépendante du code Javascript avec les observateurs. Je ne veux pas que ça pause juste parce que j'ai déménagé d'un bloc dans les DOM. A 'ce innerHTML = 'innerHTML' solution n'est pas ce que je recherche. Je vais aussi avoir besoin de le faire lorsque le DOM est chargé.

Je veux aller de ce:

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

:

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

...quand le document est chargé avec rien de gesticuler.

OriginalL'auteur | 2011-06-13

  1. 44

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

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

    MacGuffin sera déplacé automatiquement de l'un à l'autre.

    Et il n'y aura pas de scintillement.

    Merci beaucoup. Travaillent bien même si je ne suis pas pour la balise BODY, je suis allé pour le prototype sur les DOM de la méthode de chargement.
    Heureux, il a travaillé. Je ne sais pas bien de prototype, mais si je me souviens bien $('there').appendChild( $('MacGuffin') ) pourrait fonctionner aussi.
    c'est vraiment génial, bien mieux que le sale css astuces
    Merci!!!! Super!

    OriginalL'auteur Mic

  2. 3

    Peut-être pas un point majeur, mais il n'y a pas de Nœud.migrateChild() en Javascript la méthode de l'interface. Si un fragment dispose déjà d'un parent, d'ailleurs dans les DOM (div id='MacGuffin" ne dans l'exemple de balisage ci-dessus), appendChild() tranquillement se détache de l'argument fragment partir de n'importe quel parent actuel avant de refixer en vertu de la nouvelle mère. Dans mon esprit migrateChild() serait un plus sémantiquement significatifs du nom de la méthode que appendChild(), moins de besoin de StackOverflow développeur recherches pour faire allusion à ses puissantes capacités.

    developer.mozilla.org/en-US/docs/Web/API

    OriginalL'auteur rickatech

  3. 1

    Pour déplacer le contenu de here en there, vous êtes au fond après:

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

    Malheureusement, cela ne fonctionne pas.

    Comme les deux autres réponses, il semble que vous avez recours à la plaine de JavaScript prototype seulement de fournir 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 Jean Démissionner du blog pour les statistiques de performance sur DocumentFragments:
    http://ejohn.org/blog/dom-documentfragments/)

    Merci pour regarder en que pour moi. Je n'ai pas pu utiliser le raccourci $ mais @Mic suggestion a bien fonctionné. J'ai été en mesure d'utiliser un Prototype pour l'exécution de la déplacer sur la cathédrale de la charge, mais j'ai été surpris il n'y a pas de Prototype de la solution.

    OriginalL'auteur searlea

  4. 1

    Pour déplacer le contenu de here en there, cela fonctionne, tant que here renferme tout ce que vous souhaitez déplacer, comme un <div>:

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

    descendants() retourne un tableau et insérer prend de contenu, utilisez donc le premier élément.

    OriginalL'auteur Jim C