Maison > Article > interface Web > Comment utiliser JS pour lire le contenu XML et le sortir en div

Comment utiliser JS pour lire le contenu XML et le sortir en div

php中世界最好的语言original: 2018-06-07 11:48:211680parcourir

Cette fois, je vais vous montrer comment utiliser JS pour lire du contenu XML et le sortir dans un div. Quelles sont les précautions à prendre pour utiliser JS pour lire du contenu XML et le sortir dans un div. Voici un cas pratique, prenons-le ? un regard.

Structure du fichier note.xml :

<nooo>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
<note>
<to>a</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
</nooo>

Utilisez js pour générer du XML dans p :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>www.jb51.net js读取xml</title>
    <style>
     .aaaa{width: 30%;height: 50px;line-height: 50px;text-align: center;border: 1px solid darkblue;float: left;}
    </style>
  </head>
  <body>
    <p id="xmlid"></p>
    <script>
      xmltext = new XMLHttpRequest;
      xmltext.open("GET","note.xml",false);
      xmltext.send();
      a = xmltext.responseXML;
      //document.getElementById("xmlid").innerHTML = a.getElementsByTagName("to")[2].childNodes[0].nodeValue;
      x = a.getElementsByTagName("note");
      for(i=0;i<x.length;i++)
      {
        document.write("<p class=&#39;aaaa&#39;>");
        document.write(x[i].getElementsByTagName("to")[0].childNodes[0].nodeValue);
        document.write("</p>");
        document.write("<p class=&#39;aaaa&#39;>");
        document.write(x[i].getElementsByTagName("heading")[0].childNodes[0].nodeValue);
        document.write("</p>");
        document.write("<p class=&#39;aaaa&#39;>");
        document.write(x[i].getElementsByTagName("body")[0].childNodes[0].nodeValue);
        document.write("</p>");
      }
    </script>
  </body>
</html>

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utilisez jquery pour obtenir le contenu spécifique du fichier téléchargé

JS pour faire cliquer sur la récupération du compte à rebours (lecture obligatoire)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：réagir+redux à partir de zéroArticle suivant：réagir+redux à partir de zéro

Articles Liés

Voir plus