11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour et meilleurs voeux à tous
J'ai un petit souci en ce début d'année. Je crée des éléments d'une liste de type <ul> avec createElement. Pas de souci. Voici un résumé du code

function ajout()
{
	ajoutArticle = prompt("quoi ?");
	liste=document.getElementById("liste");
	nouveauli=document.createElement("li");
	nouveauli.innerHTML=ajoutArticle;		
	liste.appendChild(nouveauli);	
}


Si j'affiche le nombre d'éléments de type <li> après ajout, le bon nombre s'affiche.
Maintenant j'ajoute une fonction de suppression d'élements "à la volée" (l'utilisateur tape le texte de l'élément à supprimer). Je m'aperçois alors que c'est l'ancienne liste qui est conservée, avant les ajouts. Les nouveaux articles ne sont ajoutés que "virtuellement". Si j'avais 2 articles en début et que j'en ajoute 5, je suis dans l'incapacité de supprimer le quatrième car il n'existe pas.

A part créer un tableau de conservation de mes éléments, y a t'il une solution plus "propre" ?

Merci
Modifié par coucou (02 Jan 2007 - 18:20)
Salut, bonne année à toi aussi.

Je peux me tromper, mais je pense que tu ne devrait pas utiliser "innerHTML".

j'aurais tendance à faire un code de ce type :

function ajout()
{
	var ajoutArticle = prompt("quoi ?");
	var liste=document.getElementById("liste");
	var nouveauli=document.createElement("li");
	var contenu = document.createTextNode(ajoutArticle);

	nouveauli.appendChild(contenu);	
	liste.appendChild(nouveauli);	
}
Bonsoir
Effectivement, la rigueur du DOM voudrait que j'écrive plutôt ta solution (c'est d'ailleurs ce que j'ai fait dans une autre application). Toutefois cette solution avec innerHTML semble fonctionner. Elle demande à être testée avec l'ajout d'autres éléments que des balises <li>. Si ça marche, il faudra alors se demander pourquoi et surtout la différence avec createTextNode
Salut,
coucou a écrit :
Si ça marche, il faudra alors se demander pourquoi et surtout la différence avec createTextNode
La différence est assez simple : innerHTML n'est ici pas du tout adapté, car si l'utilisateur entre des balises, elles seront interprétées par le parseur HTML du navigateur. Par exemple : "<script>alert(1);</script>".
Bonjour

effectivement. Je n'avais pas pensé aux balises possibles. Merci pour tes éclaircissements.