11548 sujets

JavaScript, DOM et API Web HTML5

Bonsoir (décidément je vis sur le forum aujourd'hui !),

Je souhaiterais insérer un div dans un autre en javascript. voici donc mon code.



$$('div.picture').each( function (objDiv) {
        objDiv.appendChild(Builder.node('div', {className: 'pictureInf'}, [
		Builder.node('div', {className: 'pictureTitle'}), 
		Builder.node('div', {className: 'pictureCount'})
	]));
});
		


Le div inséré (pictureInf) sera donc composé de deux autres div (pictureTitle et pictureCount).
Ce div sera inséré dans tous les div ayant pour classe picture.

Mon problème et que le div pictureInf est inséré à la fin des div picture (juste avant le </div>).

Alors que j'aimerais qu'il soit juste après le <div class="picture">.

Merci de votre aide.
Modifié par ashesheart (21 Mar 2008 - 22:58)
Salut,

comme dans un autre post je dirais d'ab que je debute en DOM.

j'essai de repondre et là je te propose de lire

insertBefore

cela ne ferait-il pas l'affaire a la place du appendChild?

peut-etre before le firstchild?
Modifié par CPascal (21 Mar 2008 - 17:19)
Aarf !
J'ai bien essayé le insertBefore et tout le tralala mais d'après ce que j'ai compris le insertBefore insère avant un élément (donc ici cela le placera avant le <div>).
Modifié par ashesheart (21 Mar 2008 - 21:41)
Re,

moi je vois la chose comme ça.

si l'element est non-vide tu designes comme element de reference le premier fils de ton div avec insertBefore.

si l'element est vide j'imagine qu'on peut le detecter. soit le firstchild te renvoie un undefined soit il y a surement un moyen dans le genre. ben la tu inseres avec appendchild.

en effet si le div est vide c'est kif-kif que tu le mettes avant le </div> ou apres le <div>.

nop?
Modifié par CPascal (21 Mar 2008 - 22:27)
L'element n'est pas vide il contient une liste d'image genre


<div class="picture">
     <img src="" alt="1" />
     <img src="" alt="2" />
     .....
     <img src="" alt="10" />
</div>


Je souhaite donc faire ceci.


<div class="picture">
     <div class="pictureInf">
         <div class="pictureTitle"></div><div class="pictureCount"></div>
     </div>
     <img src="" alt="1" />
     <img src="" alt="2" />
     .....
     <img src="" alt="10" />
</div>


Or le appendChild insere mon div pictureInf aprés la derniere <img />
soit avant le </div> de picture
et

 $$('div.picture').each( function (objDiv) {
        objDiv.insertBefore(
                       Builder.node('div', {className: 'pictureInf'}, [
		Builder.node('div', {className: 'pictureTitle'}), 
		Builder.node('div', {className: 'pictureCount'})
	           ])
       ,objDiv.firstChild);
});


ne marche pas? bizarre . t'es sur d'avoir tester ça? et firstchild.nodeValue mais d'apres ce que je lis je pense pas.

sinon j'avoue je vois pas.
Modifié par CPascal (21 Mar 2008 - 22:52)
C'est exactement c'est qu'il me fallait. Merci pour ton aide. En fait je ne connaissais pas le objDiv.firstChild mais maintenant j'ai compris.

Merci encore