11548 sujets

JavaScript, DOM et API Web HTML5

AppendChild

Bonjour, j'ai quelques soucis avec l'élément appenchild().

Voici mon souci:

          for (var i = 0; i < tabResult.length; i++) {
               resultat = tabResult.item(i); 
               var c_liste = document.createElement('li');
               var c_span_n = document.createElement('span');
			   var c_span_njf = document.createElement('span');
			   var c_span_p = document.createElement('span');
			   var c_span_dn = document.createElement('span');
               //var texte = document.createTextNode(resultat.getAttribute('nom')+" "+resultat.getAttribute('prenom')+" "+resultat.getAttribute('dnaiss'));
               var nom = document.createTextNode(resultat.getAttribute('nom'));
			   var nomjf = document.createTextNode(resultat.getAttribute('nomjf'));
			   var prenom = document.createTextNode(resultat.getAttribute('prenom'));
			   var dnaiss = document.createTextNode(resultat.getAttribute('dnaiss'));
			   c_span_n.appendChild(nom);
			   c_span_njf.appendChild(nomjf);
               //c_liste.setAttribute('href', resultat.getAttribute('prenom'));
               //c_liste.setAttribute('title', resultat.getAttribute('nom'));
               c_liste.appendChild(c_span_n+c_spanjf+c_span_p+c_span_dn);
               //document.getElementById('zoneResultats').appendChild(c_liste);
			   document.getElementById('zoneResultats').appendChild(c_liste);
          }


je récupère plusieurs champs, je crée un noeud (span) pour chaque et j'aimerais les regrouper dans un seul noeud (li) pour insérer mes 4 span dans un li.

si je met un seul de mes champs
c_liste.appendChild(c_span_n);

celui-ci s'affiche bien, mais si je tente de tous les regrouper de cette manière j'ai une erreur javascript :
c_liste.appendChild(c_span_n+c_spanjf+c_span_p+c_span_dn);


J'ai beaucoup de mal à cerner correctement ces "fonctions" javascript donc je ne sais pas trop comment m'y prendre.

le code html correspondant est :

		 <ul id="zoneResultats" style="visibility: hidden;"></ul>


Pour résumer j'aimerais dans mon <UL id="zoneRetultats">, afficher mes <li> contenant 4 <span> par <li> créé.

les balises n'ont pas vraiment d'importance, mais je n'arrive pas a insérer plusieurs noeuds dans un noeud


Avez vous une aide à m'apporter svp?

merci beaucoup
Modifié par r4z (16 Apr 2008 - 17:48)
Bonjour,

Comme son nom l'indique la fonction appendChild ajoute 1 enfant. En outre, tes variables c_span sont des objets (retournés par document.createElement) et donc tu ne peux pas utiliser l'opérateur de concaténation de cette manière.

Il te faut donc autant de appendChild que tu as de span de créés.

dunjl
Modifié par dunjl (16 Apr 2008 - 17:55)
d'accord merci, je me complique la vie alors en passant par des objets non?

par contre je ne vois pas comment mettre plusieurs appendchild dans un

document.getElementById('zoneResultats').appendChild(c_liste);
Modifié par r4z (16 Apr 2008 - 21:04)
a écrit :
d'accord merci, je me complique la vie alors en passant par des objets non?

Je ne crois pas, si tu veux créer tes éléments à la volée il faut bien utiliser createElement.

Ce qui est plus discutable, c'est de créer 4 span dans un <li> pour des éléments qui me semblent être des éléments de liste. Enfin je suppose, car je ne connais pas exactement ce que tu veux obtenir.

a écrit :
par contre je ne vois pas comment mettre plusieurs appendchild dans un
document.getElementById('zoneResultats').appendChild(c_liste);

Comme tu l'as fait pour createElement, si je reprends ton code, cela donnerait ça :
for (var i = 0; i < tabResult.length; i++) {
	var resultat = tabResult.item(i); 
	var c_liste = document.createElement('li');
	
	var c_span_n = document.createElement('span');
	var c_span_njf = document.createElement('span');
	var c_span_p = document.createElement('span');
	var c_span_dn = document.createElement('span');
	
	var nom = document.createTextNode(resultat.getAttribute('nom'));
	var nomjf = document.createTextNode(resultat.getAttribute('nomjf'));
	var prenom = document.createTextNode(resultat.getAttribute('prenom'));
	var dnaiss = document.createTextNode(resultat.getAttribute('dnaiss'));
	
	c_span_n.appendChild(nom);
	c_span_njf.appendChild(nomjf);
	c_span_p.appendChild(prenom);
	c_span_dn.appendChild(dnaiss);
	
	c_liste.appendChild(c_span_n);
	c_liste.appendChild(c_spanjf);
	c_liste.appendChild(c_span_p);
	c_liste.appendChild(c_span_dn);
	document.getElementById('zoneResultats').appendChild(c_liste);
}


bonne journée

dunjl
merci ça fonctionne, par contre mes span sont accolés les uns aux autres sans espace :s.

En fait la mise en forme que je souhaiterais faire se rapproche de celle des résultats de google.

J'aimerais les afficher comme si c'était un tableau avec une couleur différente pour dnaiss par exemple comme ça :

"nom" "nom_jf" "prenom" _______________ "dnaiss"
"nom" "nom_jf" "prenom" _______________ "dnaiss"
"nom" "nom_jf" "prenom" _______________ "dnaiss"
"nom" "nom_jf" "prenom" _______________ "dnaiss"

un peu sous la forme d'un tableau
Modifié par r4z (17 Apr 2008 - 11:03)
Je vois 2 solutions,

soit tu gardes ton code tel qu'il est. Pour le fait que tes spans soit accolés tu leur appliques une marge gauche ou droite dans ta feuille de style et dans ta fonction js tu donnes un nom de classe à ton span "dnaiss" pour lui appliquer un style différent.

ou alors, meilleure solution je pense, comme tu dis que tu veux afficher tes données sous la forme d'un tableau, et bien tu fais un tableau Smiley cligne

dunjl
oki merci, la gestion des balises est la même en DOM de toute manière non?

Sinon j'ai une autre petite question ^^.

Je viens de faire ça :
			// on affiche le nombre de résultats trouvés
			var nb_resultats = document.createTextNode('Voici les ' + tabResult.length + ' correspondances trouvées.');
			if(document.getElementById('zoneInfos').hasChildNodes()){
				document.getElementById('zoneInfos').replaceChild(nb_resultats, document.getElementById('zoneInfos').firstChild);
			}else{
				document.getElementById('zoneInfos').appendChild(nb_resultats);
			}


Pour afficher le nombre de résultats trouvés, et j'aimerais mettre tabResult.length en gras, j'ai essayé avec appendData et aussi insertData mais je n'y arrive pas. Tu pourrais me conseiller stp?

Merci dunjl
Comme je le répète assez souvent, c'est bien joli de vouloir faire du DOM, mais là tu fais du DOM inutilement dans certaines parties de ton code (trop de DOM tue le DOM).
Tu peux très bien faire tout ce que tu fais là par un innerHTML qui est largement plus rapide (démontré à maintes reprises sur ce forum).

Je prend juste pour exemple ton dernier post, toutes tes lignes, se font en une seule.

document.getElementById('zoneInfos').innerHTML = 'Voici les ' + tabResult.length + ' correspondances trouvées.';

Voilà, simple et efficace.

Edit :
avec le premier code que tu as filé en haut, voila ce que ça donne : 

for (var i = 0; i < tabResult.length; i++) {
    resultat = tabResult.item(i);
    var c_liste = document.createElement('li');
	c_liste.innerHTML = [
		'<span>',resultat.getAttribute('nom'),'</span>',
		'<span>',resultat.getAttribute('nomjf'),'</span>',
		'<span>',resultat.getAttribute('prenom'),'</span>',
		'<span>',resultat.getAttribute('dnaiss'),'</span>'
	].join('');
	document.getElementById('zoneResultats').appendChild(c_liste)
}

Modifié par Gatsu35 (17 Apr 2008 - 17:44)
Hello,
Gatsu35 a écrit :
avec le premier code que tu as filé en haut, voila ce que ça donne : 

for (var i = 0; i < tabResult.length; i++) {
    resultat = tabResult.item(i);
    var c_liste = document.createElement('li');
	c_liste.innerHTML = [
		'<span>',resultat.getAttribute('nom'),'</span>',
		'<span>',resultat.getAttribute('nomjf'),'</span>',
		'<span>',resultat.getAttribute('prenom'),'</span>',
		'<span>',resultat.getAttribute('dnaiss'),'</span>'
	].join('');
	document.getElementById('zoneResultats').appendChild(c_liste)
}

En espérant que resultat.getAttribute(...) ne contient pas des caractères spéciaux HTML, sinon le résultat peut être assez amusant...
ils contiennent des caractères spéciaux, dans dnaiss (date de naissance) et prénom( exemple: Cécile)
r4z a écrit :
ils contiennent des caractères spéciaux, dans dnaiss (date de naissance) et prénom( exemple: Cécile)

"Cécile" ne contient pas de caractères spéciaux HTML. Je pensais plutôt à <, > et &.
ah d'accord. Merci ^^

Bah je sais pas trop en tout cas ça fonctionne pas mal comme ça et ça me permet de découvrir les éléments DOM ^^

c'est vrai que j'avais pensé au innerHTML mais je sais pas faudrait que je test en parallèle.

et sinon en DOM (pour reprendre mon post #17) comme pourrais je faire pour insérer une balise <b> ou <strong> autour de tabResult.length

qui est dans 

document.getElementById('zoneInfos').innerHTML = 'Voici les ' + tabResult.length + ' correspondances trouvées.';

Modifié par r4z (17 Apr 2008 - 18:00)
r4z a écrit :
ah d'accord. Merci ^^

Bah je sais pas trop en tout cas ça fonctionne pas mal comme ça et ça me permet de découvrir les éléments DOM ^^

c'est vrai que j'avais pensé au innerHTML mais je sais pas faudrait que je test en parallèle.

et sinon en DOM (pour reprendre mon post #17) comme pourrais je faire pour insérer une balise <b> ou <strong> autour de tabResult.length

qui est dans 

document.getElementById('zoneInfos').innerHTML = 'Voici les ' + 
tabResult.length + ' correspondances trouvées.';



serieusement je prefererai le faire à coup de innerHTML c'est autrement plus rapide.

mais si tu veux quelque chose DOMistiquement parlant : 

var zoneInfos = document.getElementById('zoneInfos');
var strong = document.createElement('strong');
while(zoneInfos.childNodes.length>0) { //on copie tous les childNodes de zoneInfos, dans strong
	strong.appendChild(zoneInfos.firstChild);
}
zoneInfos.appendChild(strong);

et si tu veux en innerHTML ca prend une ligne Smiley lol 

var zoneInfos = document.getElementById('zoneInfos');
zoneInfos.innerHTML = '<strong>'+zoneInfos.innerHTML+'</strong>';
Merci Gatsu, je comprend ton point de vue ^^ sur les innerHTML

Par contre la tu m'as donné un code DOM qui met tout mon noeud zoneInfos en gras, mais j'aimerais juste mettre le contenu de tabResult.length en gras (et qui se trouve au milieu d'une phrase).

Alors j'ai pensé à créer 3 textnode, un pour le début de la phrase, un pour la variable que je veux mettre en gras et un pour la fin mais c'est un peu lourd
j'ai testé comme ceci, c'est vrai que c'est super lourd, mais ça fonctionne :

			var nb_res_bold = document.createElement('b');
			var nb_res_var = document.createTextNode(tabResult.length);
			nb_res_bold.appendChild(nb_res_var);
			var nb_res_deb = document.createTextNode('Voici les ');
			var nb_res_fin = document.createTextNode(' correspondances trouvées.');
			
			var nb_resultats = document.createElement('span');
			nb_resultats.appendChild(nb_res_deb);
			nb_resultats.appendChild(nb_res_bold);
			nb_resultats.appendChild(nb_res_fin);

Modifié par r4z (18 Apr 2008 - 17:01)
r4z a écrit :
j'ai testé comme ceci, c'est vrai que c'est super lourd, mais ça fonctionne :

			var nb_res_bold = document.createElement('b');
			var nb_res_var = document.createTextNode(tabResult.length);
			nb_res_bold.appendChild(nb_res_var);
			var nb_res_deb = document.createTextNode('Voici les ');
			var nb_res_fin = document.createTextNode(' correspondances trouvées.');
			
			var nb_resultats = document.createElement('span');
			nb_resultats.appendChild(nb_res_deb);
			nb_resultats.appendChild(nb_res_bold);
			nb_resultats.appendChild(nb_res_fin);

Hé bien dans la pratique on aurait pas fait ça hein :o :o :o

Normalement, si tu as juste une zone à changer. Dès le début, tu la fous dans un élément avec un id 

bklals dfbdfg dg fedg d<strong id="letrucquichange">45</strong> sfss lll fdfd rererer

C'est mieux et plus propre.
En effet mais le texte qu'il ya autour de ma variable n'est pas statique non plus c'est ça le problème Smiley decu .

Ou alors je vais essayer avec des div visibles et hide je verrais bien ce que ça donne.

merci beaucoup en tout cas
j'ai une autre question, dans ce genre de listes générées comment est il possible de récupérer une des <li> bien précise? ya t'il un id par défaut ou il faut en rajouter un?

parce exemple sur clic q'un des éléments de la liste j'aimerais le récupérer, yat'il un moyen rapide de le faire?

merci ^^

edit : j'ai créé une petite fonction qui récupère un id créé automatiquement à la création de la liste, mais je n'arrive pas a transférer le noeud dans une autre liste :

function epingle(id_li){
	//alert(id_li);
	
	var li_copie = document.getElementById("id_li").cloneNode(true);

	with(document.getElementById('zoneEpinglee').style) {
		visibility = 'visible';
	};
	
//document.getElementById("zoneEpinglee").firstChild.nodeValue += li_copie.firstChild.nodeValue;
document.getElementById("zoneEpinglee").appendChild(li_copie);
	//document.getElementById(id_li).appendChild(c_liste);
}



edit2 : ça fonctionne en fait j'avais oublié d'enlever les guillemets autour de id_li comme c'est une variable.
Modifié par r4z (21 Apr 2008 - 17:59)
Sujet clos
Aller à