svg-elements in xml via XHR, putting a single element as an inline code to html5

[tumpelo]

Code below. 20 svg-elements within a XML-document got from a server via asynchrounous XMLHttpRequest, put into the table svgs (svgs.length == 20, OK). I'd like to put one randomly selected svg-element from the table to html5-page as a inline code. So I think I would need to have single svg -element as a string, which could be inserted to the html5-page. How to do this? And yes, I know that with innerHTML or with jQuery's .load()-method, but what I should the give as a parameter?

function showImage() {

if(xhr.readyState == 4){

if(xhr.status == 200){

if(xhr.responseXML && xhr.responseXML.childNodes.length > 0){
res = xhr.responseXML;
svgs = res.getElementsByTagName("svg");
alert(svgs.length);

}else{ 
document.getElementById('container').innerHTML = xhr.responseText; 
}
}else{
$('#container').load(toText(xhr.status));
} 
}
}

[sbhmf]

On a hunch, I wonder if a problem exists when your code attempts to access elements by tagname from a returned text-stream that has not yet been deserialized into nodes.

[rnd me]

there is no command to get the source of XML nodes. (they are killing XMLSerializer soon)


you MIGHT be able to simply grab the node and append it to your HTML element.
you might need to use importNode depending on the strictness in use.

otherwise maybe a temp div will work?

var d=document.createElement("div")
d.appendChild(res.getElementsByTagName("svg")[0]);

alert(d.innerHTML);

or, the worst-case:

var d=document.createElement("div")
d.innerHTML=res.responseText;

var svg1=d.getElementsByTagName("svg")[0];

alert(svg1.outerHTML);