Ok, j'admets que ça peut être difficile de trouver à quel endroit il faut mettre les guillemets. Tu te souviens de mon histoire avec cette ville qui s'appelle Les Oies ? Avec V = "Les Oies", quand ton script remplace toutes les occurences de V dans la ligne suivante :
sel += "<option value="+V+">" + V + "</option>";
Ça donne ça :
<option value=Les Oies>Les Oies</option>
On se retrouve donc avec une balise <option> qui a un attribut value=Les, et un attribut Oies qui est « vide ».
Pour éviter ce coupage en deux des attributs, on voudrait avoir des guillemets autour du nom de ville pour que tout reste dans l'attribut value, comme ceci :
<option value="Les Oies">Les Oies</option>
Comme tu vois la différence est subtile, mais elle est importante. Alors comment ajouter ces guillemets ? Il y a au moins 3 façons.
A. Soit tu utilises la séquence d'échappement
\" que tu sembles déjà connaître
:
1
2
| sel += "<option value=\""+V+"\">" + V + "</option>";
//--------------------^^-----^^ |
B. Soit tu utilises des guillemets simples (
') pour délimiter tes chaînes JS :
sel += '<option value="'+V+'">' + V + '</option>';
En JS ça ne fait aucune différence (attention ce n'est pas le cas en PHP, il y a
une différence importante).
C. Soit tu utilises des guillemets simples pour délimiter tes attributs HTML :
sel += "<option value='"+V+"'>" + V + "</option>";
C'est valide en HTML, mais ça t'oblige à échapper les guillemets simples utilisés en tant qu'apostrophes dans les noms de ville (par exemple dans
'L\'Île'), sinon ça pose le même genre de problème qu'avec l'espace. Si tu choisis cette méthode, tu devras appeler
replace sur
V, ça demande donc un peu de travail supplémentaire au processeur.
Tu peux trouver tout un tas d'autres variantes de ces solutions en échappant le guillemet simple (\') ou encore en utilisant les codes ASCII des guillemets, "\x22" et "\x27" (écris-les dans ta console pour voir).
À toi de choisir la solution qui te convient le mieux
Envoyé par
LampeRouge
Bah, sans les guillemets il me retire bien ville qui est égale à document.getElementById("ville");
Logiquement il me retire mon <input text..... et pas ma liste créer par le JS. (ou peut être aussi en tant qu'enfant)
Le résultat escompté n'est pas le bon ou il est exagéré.
Il faudrait donc reconstitué le <input text.... sans son enfant.
Alors en fait, <input> est une balise vide, elle n'a pas d'enfant. La liste est sa voisine. Enfin, normalement… Ce qui se passe en réalité, c'est que ton script retire l'input ville, qui du coup se retrouve « en l'air », détaché du DOM. Après ça, il tente d'insérer la liste avec insertAdjacentHTML en utilisant ville comme point d'appui. Le problème, c'est que ville n'est plus dans le DOM. Je viens de vérifier avec ma console, et quand j'essaye ce genre de choses, je reçois une erreur NoModificationAllowedError: Modifications are not allowed for this document. Est-ce que tu vois quelque chose qui ressemble à ça dans ta console ?
J'ai essayé:
ville.parentNode.removeChild(ville.firstElementChild.nodeName);
Marche pas.
ville.parentNode.removeChild(ville.firstElementChild);
Marche toujours pas.
Le fait que ville n'ait pas d'enfant explique pourquoi ces deux tentatives ont échoué.
1
2
3
4
5
| var liste = ville.children;
if(liste){
ville.parentNode.removeChild(liste); // on retire la précedente liste avant de la recréer.
} |
TypeError: Argument 1 of Node.removeChild does not implement interface Node.
Belle tentative 
Mais tu en demandes trop à cette pauvre removeChild, elle n'est pas capable de retirer plusieurs éléments d'un coup. Quand tu demandes children ou childNodes, tu obtiens une collection (comme avec querySelectorAll par exemple), tu dois ensuite la parcourir avec une boucle. Mais de toutes façons, comme on a vu, ville n'a pas d'enfants. Je te dis ça pour que tu comprennes le message d'erreur : une collection de Node n'est pas un Node.
Répondre avec citation
Tu n'as pas eu de message dans ta console ?
Même si en fait, on n'est pas censés avoir plusieurs fois le même id dans la page. Dans le cas de plusieurs id identiques, le comportement de 
Partager