dom - jQuery appending to AJAX loaded SVG problem

Question

I am successfully loading via AJAX some svg from external file:

$("#svg").load(svgUrl + " svg", function() {  
    // do stuff  
});  

My HTML looks like that:

<div id="svg" ...>
    <svg ...>
        ...
    </svg>
</div>

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:

$("#svg").load(svgUrl + " svg", function() {  
    $("svg").append("<g id='compass'></g>");  
    // do stuff  
});  

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.

Update:
Thanks to echo-flow 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:

$("#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");
});

If I look in console in firebug I see that result of the AJAX request for compass markup is successful but is empty.

Answer 1

jQuery is not really built to be aware of XML namespaces, so the string "<g id='compass'></g>"is likely getting parsed such that the generated DOM nodes are in the default namespace, as opposed to the SVG namespace. You can solve this by using regular DOM to create the nodes. This would look like the following:

svgns = "http://www.w3.org/2000/svg"
$("#svg").load(svgUrl + " svg", function() {  
    var g = document.createElementNS(svgns,"g");
    g.setAttributeNS(null,'id','compass');
    $("svg").append(g);
    //do stuff
});  

If you need to create more complex structures, then I would recommend looking at the jquery-svg library, which has a cleaner API for generating SVG DOM.

Updated

I misunderstood that you were trying to load an SVG document and append it to your host HTML document - instead, I thought you were trying to generate SVG using script. To solve your problem, I would recommend doing the following (not tested, but should work):

//get the SVG document using XMLHTTPRequest
$.get(svgUrl + " svg",
function(svgDoc){
  //import contents of the svg document into this document
  var importedSVGRootElement = document.importNode(svgDoc.documentElement,true);
  //append the imported SVG root element to the appropriate HTML element
  $("#svg").append(importedSVGRootElement);
},
"xml");