Discussion :

[Tchupacabra]

Bonjour,

je cherche à déplacer un div mais je ne sais pas comment m'y prendre...
J'ai du intégrer le framework prototype.js pour faire de l'AJAX.
Est-il possible de l'utiliser pour cela ? (dans ce cas, je n'ai pas trouver dans la doc... ) ou existe-il une méthode javascript ?

J'aimerais par exemple, déplacer element-1 après le dernier fils de contenu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="contenu">
    <div id="element-1">...</div>
    <div id="element-2">...</div>
    <div id="element-3">...</div>
</div>

afin d'obtenir :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="contenu">
    <div id="element-2">...</div>
    <div id="element-3">...</div>
    <div id="element-1">...</div>
</div>

Merci d'avance à qui m'aidera !
@ bientôt

[Boo2M0rs0]

Bonjour,

Les fonctions dom suffisent. Premièrement pour placer un noeud dans le document, il ne faut pas qu'il s'y trouve déjà, il faut donc retirer le noeud en question du document avec la méthode removeChild

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var element = $element('element-1');
$('contenu').removeChild(element);
//ou plus simple sans avoir à référencer le conteneur:
element.parentNode.removeChild(element);

Ensuite, pour réinsérer l'élément en fin, de liste, on peut utiliser la méthode appendChild:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$('contenu').appendChild(element);
//ou alors $('element-2').parentNode.appendChild(element);

Enfin, si on veut l'insérer à un endroit précis, on peut utiliser insertBefore:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
//Insérer avant l'élément 3:
$('element-3').parentNode.insertBefore(element, $('element-3'));

Voilà (il existe peut-être d'autres méthodes rajoutées par prototype mais je ne connais pas cette librairie).

[SpaceFrog]

Pas besoin de l'effacer si c'est pour le recréer dasn la foulée ...
Il suffit de le déplacer avec insertBefore:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div style="background-color:green;" onclick="this.parentNode.insertBefore(this,this.parentNode.firstChild)">&nbsp;</div> 
<div style="background-color:yellow;" onclick="this.parentNode.insertBefore(this,this.parentNode.firstChild)">&nbsp;</div> 
<div style="background-color:red;" onclick="this.parentNode.insertBefore(this,this.parentNode.firstChild)">&nbsp;</div>

valsez couleurs

[Tchupacabra]

ok ok

merci à vous 2 !
@+