title: jQuery appending to AJAX loaded SVG problem
body: <p>I am successfully loading via AJAX some svg from external file:  </p>
  
  <pre><code>$("#svg").load(svgUrl + " svg", function() {  
      // do stuff  
  });  
  </code></pre>
  
  <p>My HTML looks like that:</p>
  
  <pre><code>&lt;div id="svg" ...&gt;
      &lt;svg ...&gt;
          ...
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can see the graphics just fine. Now I want to add some additional svg elements to the loaded svg. I changed my script to:  </p>
  
  <pre><code>$("#svg").load(svgUrl + " svg", function() {  
      $("svg").append("&lt;g id='compass'&gt;&lt;/g&gt;");  
      // do stuff  
  });  
  </code></pre>
  
  <p>For some reasons the added element appears as hidden in firebug and no matter what xml I put inside of it I can't see it on my webpage.</p>
  
  <p><strong>Update:</strong><br>
  Thanks to <a href="https://stackoverflow.com/users/366856/echo-flow">echo-flow</a> I was able to append  to my SVG. Now if I try to load my compass svg from another xml file it doesn't appear in my DOM. At the moment my code looks like:</p>
  
  <pre><code>$("#svg").load(obj.svgUrl + " svg", function() {
      var svgns = "http://www.w3.org/2000/svg";
      var g = document.createElementNS(svgns,"g");
      g.setAttributeNS(null,'id','compass');
      $("svg").append(g);
      $("#compass").load("files/svg/compass.xml");
  });
  </code></pre>
  
  <p>If I look in console in firebug I see that result of the AJAX request for compass markup is successful but  is empty.</p>