title: How to read and parse an XML which exist inside the page using jQuery
body: <p>I have an xml file which I imported in my html page like this:</p>
  
  <pre><code>&lt;script type="text/xml" src="Categories.xml" id="categoriesXML"&gt;  
  &lt;/script&gt;
  </code></pre>
  
  <p>And using my jQuery code I want to read this xml file and parse it to do some stuff with its data, so I tried to write something like this:</p>
  
  <pre><code> var xml = $('#categoriesXML').text();
      $(xml).find("Category").each(function () {
          alert($(this).find("Title").text());
      });
  </code></pre>
  
  <p>But what I got is that the xml variable is empty.</p>
  
  <p>I also tried to write it:</p>
  
  <pre><code>var xml = $('#categoriesXML');
  </code></pre>
  
  <p>but again I can't get it work.</p>
  
  <p>The xml file content:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8" ?&gt;
  &lt;Categories&gt;
    &lt;Category&gt;
      &lt;Title&gt;CAT1&lt;/Title&gt;
      &lt;SubCategories&gt;
        &lt;SubCategory&gt;
          &lt;Title&gt;SUB1&lt;/Title&gt;
        &lt;/SubCategory&gt;
      &lt;/SubCategories&gt;
    &lt;/Category&gt;
  &lt;/Categories&gt;
  </code></pre>
  
  <p>So how to read this xml file this way, <strong>without using ajax</strong>?</p>
  
  <p><strong>Why I want it without ajax:</strong><br>
  Because I want this to happen on the page load, and no need to start getting the file after my page loads which will show my page nearly empty at first load, and will wait till the ajax response with the file which may be very big in some cases.</p>