[DOM] Déplacer un élèment dans l'arbre HTML

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... :oops: ) ou existe-il une méthode javascript ?

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

Code:

---

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:

---

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

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:

---

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:

---

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:

---

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).

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:

---

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 ;)

ok ok :)

merci à vous 2 !
@+ ;)