Discussion :

[SPACHFR]

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 :

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

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 :

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

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 :

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

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

Pour réécrire mon div je fais ceci :

Code :

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

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 :

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

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

[Invité]

utilise cloneNode

[Bovino]

Code :

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

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 (et ça tombe bien, c'est le cas ).

Code :

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

t.appendChild(tabImg[a]);

devrait arranger le tout.

[SPACHFR]

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

[SPACHFR]

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

Voila mon div d'origine :

Code :

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

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 :

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

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)

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

Code :

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

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 :

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

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

[Bovino]

Code :

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

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

[SPACHFR]

Merci !!

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

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

MERCI

[SPACHFR]

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