title: jquery - How to get xml data
body: <p>Im a total noob to html, css, javascript, and programming altogether. Please bear with me.</p>
  
  <p>Im trying to populate my table using jquery. The data will be coming from an xml file.</p>
  
  <p><b><code>football_player.xml</code>:</b></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  &lt;football_player&gt;
    &lt;name&gt;Cristiano Ronaldo&lt;/name&gt;
    &lt;club&gt;Real Madrid&lt;/club&gt;
    &lt;number&gt;7&lt;/number&gt;
    &lt;country&gt;Portugal &lt;/country&gt;
  
    &lt;name&gt;Fernando Torres &lt;/name&gt;
    &lt;club&gt;Chelsea &lt;/club&gt;
    &lt;number&gt;9&lt;/number&gt;
    &lt;country&gt;Spain&lt;/country&gt;
  
    &lt;name&gt;Iker Casillas&lt;/name&gt;
    &lt;club&gt;Real Madrid &lt;/club&gt;
    &lt;number&gt;1&lt;/number&gt;
    &lt;country&gt;Spain&lt;/country&gt;
  
    &lt;name&gt;David Beckham&lt;/name&gt;
    &lt;club&gt;Los Angeles Galaxy&lt;/club&gt;
    &lt;number&gt;23&lt;/number&gt;
    &lt;country&gt;England&lt;/country&gt;
  &lt;/football_player&gt;
  </code></pre>
  
  <p>My html table:</p>
  
  <pre><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Club&lt;/th&gt;
        &lt;th&gt;Number&lt;/th&gt;
        &lt;th&gt;Country&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;/tbody&gt;
    &lt;/tfoot&gt;
    &lt;/tfoot&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>My javascript/jquery script:</p>
  
  <pre><code>$(document).ready(function () {
    $.ajax({
      type: "GET",
      url: "football_player.xml",
      dataType: "xml",
      success: function(xml) {
        $(xml).find("football_player").each(function () {
          $("table tbody").append("&lt;tr&gt;");
          $("table tbody").append("&lt;td&gt;" + $(this).find("name").text() + "&lt;/td&gt;");
          $("table tbody").append("&lt;td&gt;" + $(this).find("club").text() + "&lt;/td&gt;");
          $("table tbody").append("&lt;td&gt;" + $(this).find("number").text() + "&lt;/td&gt;");
          $("table tbody").append("&lt;td&gt;" + $(this).find("country").text() + "&lt;/td&gt;");
          $("table tbody").append("&lt;/tr&gt;");           
        });
      }
    });
  });
  </code></pre>
  
  <p>I swear Im really a noob. I don't have any idea of what Im doing. Please help. I really want to learn. Thanks in advance.</p>