Réecriture d'un div à partir d'un tableau

Bonjour,

J'essaie de modifier le contenu d un div en mettant le contenu dans un tableau,
puis à partir de ce tableau j'effectue la réécrire du contenu ce ce div.
L'objectif est le suivant :
contenu du DIV au depart

Code:

---

1 2 3 4 5 6 7

<div id='newslist' > <img src="./img/01.jpg" class="cexpand"/> <img src="./img/02.jpg" class="cexpand"/> <img src="./img/03.jpg" class="cexpand"/>   </div>

---

contenu modifié :

Code:

---

1 2 3 4 5 6 7 8

<div id='newslist' > <img src="./img/03.jpg" class="cexpand"/> <img src="./img/01.jpg" class="cexpand"/> <img src="./img/02.jpg" class="cexpand"/> <img src="./img/03.jpg" class="cexpand"/> <img src="./img/01.jpg" class="cexpand"/> </div>

---

En fait je prend "img 03" (derniere de la liste d origine) pour placer une copie un tête de tableau et "img 01" (premiere de la liste d origine) pour placer une copie en fin de tableau.

Jusque là aucun problème.
Mais lorsque je veux réécrire le contenu du DIV, je n'ai plus le code définissant les images mais ça (sous firebug):

Code:

---

1 2 3 4

<div id='newslist' > [object HTMLImageElement][object HTMLImageElement][object HTMLImageElement][object HTMLImageElement][object HTMLImageElement] </div>

---

Du coup je n'ai plus rien dans mon DIV à l'affichage...
Apparemment l'idée de passer par un tableau pour la réécrire n'est pas bonne:calim2:

Pour réécrire mon div je fais ceci :

Code:

---

1 2 3 4 5 6

var t=document.getElementById("newslist"); t.innerHTML=""; for(var a=0;a<tabImg.length;a++){ t.innerHTML += tabImg[a]; }

---

la fonction permettant de generer le tableau

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

function getElements(tag,attr,reg){ //fonction from SpaceFrog (thanks!!) var tabReg=new Array(); var tabElts=document.body.getElementsByTagName(tag); if(!(reg instanceof RegExp)){ if(reg.indexOf("*")>-1){ reg=reg.replace(/\*/g,'.+'); reg=new RegExp(reg); }else { return tabReg; } } i=0; while(tabElts[i]){ if(tabElts[i][attr]){ if(reg.test(tabElts[i][attr])){tabReg.push(tabElts[i]);} } reg.test(""); i++; } return tabReg; }

---

Pourriez vous m'expliquer comment faire ?

Merci

utilise cloneNode

Code:

---

t.innerHTML += tabImg[a];

---

innerHTML insère une chaîne comme contenu de la balise, toi tu lui affectes un objet, donc comme on dit, si tout se passe bien, ça devrait mal se passe :mrgreen: (et ça tombe bien, c'est le cas ;)).

Code:

---

t.appendChild(tabImg[a]);

---

devrait arranger le tout.

Merci pour cette réponse.
Je vais tester l' de appendChild

:merci:

Visiblement quelque chose m'échappe dans le DOM.
j'essaie toujours de réecrire mon DIV mais je galère et je n'y arrive pas:cry:

Voila mon div d'origine :

Code:

---

1 2 3 4 5 6 7

<div id='newslist' > <img src="./01.jpg" class="cexpand"/> <img src="./02.jpg" class="cexpand"/> <img src="./03.jpg" class="cexpand"/> <img src="./04.png" class="cexpand"/> </div>

---

ce que je cherche à faire.
(copier les 2 dernières images du DIV et placer ces copies au début)

Code:

---

1 2 3 4 5 6 7 8 9

<div id='newslist' > <img src="./03.jpg" class="cexpand"/> <img src="./04.png" class="cexpand"/> <img src="./01.jpg" class="cexpand"/> <img src="./02.jpg" class="cexpand"/> <img src="./03.jpg" class="cexpand"/> <img src="./04.png" class="cexpand"/> </div>

---

pour mon test je me contente de la dernière (mais j'ai toujours pas de résultat) :koi:

J'utilise cette fonction pour essayer de copier 1 élément.

Code:

---

1 2 3 4 5 6

function modify(){ var t = document.getElementById("newslist"); var tabImg = document.getElementsByTagName("img"); t.insertBefore(tabImg[3],tabImg[0]); }

---

résultat :
(l 'image 04 et bien passée en début mais n'existe plus en fin de liste).
Le résultat est un déplacement et non pas l'insertion d'une copie !!!

Code:

---

1 2 3 4 5 6 7

<div id="newslist"> <img class="cexpand" src="./04.jpg"/> <img class="cexpand" src="./01.jpg"/> <img class="cexpand" src="./02.png"/> <img class="cexpand" src="./03.jpg"/> </div>

---

Si quelqu'un pouvait m'expliquer.... je n'y comprend rien ??

Merci

Code:

---

1 2 3 4 5

function modify(){ var t = document.getElementById("newslist"); var tabImg = document.getElementsByTagName("img"); t.insertBefore(tabImg[3].cloneNode(true),tabImg[0]); }

---

Merci !!

Je ne pensais pas que l'on pouvais écrire ça .....

Là, je suis vraiment content......

MERCI

Juste une question subsidiaire pour comprendre.

insertBefore() étant sensé ajouter un élément en debut de noeud, pourquoi cela opérait un déplacement ?

merci