Problème d'utilisation de l'attribut "href="" dans un élément de liste

Question

J'ai un listview dans un code html. Je remplis la vue de la liste dynamiquement en javascript. J'ai affiché un pdf après avoir cliqué sur l'élément de la liste. J'ai utilisé une balise d'ancrage dans l'élément de la liste ('li'). Voici le code.

$('div').live('pageshow',function(event, ui){

      var parent = document.getElementById('listview')
      var listItem = document.createElement('li');
        listItem.setAttribute('id','listitem');
        listItem.innerHTML = "<a href="Contacts.pdf" target="_BLANK" >ITEm</a>";
parent.appendChild(listItem);
     });

Mais cela ne fonctionne pas. Dans le navigateur, l'élément de la liste n'apparaît pas dans la liste. Si je supprime " href="Contacts.pdf" target="_BLANK" ", cela fonctionne bien. Quel est le problème ? J'utilise ce code avec jquery-mobile alpha2. Merci de m'aider. Merci d'avance.

Answer 1

Problème de guillemets

Remplacer cette ligne

 listItem.innerHTML = "<a href='Contacts.pdf' target='_BLANK' >ITEm</a>";

utiliser le guillemet simple à l'intérieur du guillemet double.

Answer 2

Pour utiliser des guillemets à l'intérieur de la chaîne de caractères, vous devez les échapper en utilisant des antislashs :

listItem.innerHTML = "<a href=\"Contacts.pdf\" target=\"_BLANK\" >ITEm</a>";

Je trouve qu'il est plus facile d'utiliser des apostrophes autour de la chaîne de caractères lorsque l'on crée du code HTML, de cette façon les guillemets n'ont pas besoin d'être échappés :

listItem.innerHTML = '<a href="Contacts.pdf" target="_BLANK" >ITEm</a>';

Answer 3

Vous pouvez tout avoir en une seule ligne :

$("#listview").append("<li><a href=\"Contacts.pdf\" target=\"_BLANK\">ITEm</a></li>");