How to get innerHTML from one specify child ELEMENT

Question

All:

What I want to do is:

<div id="container">
    <div class="unwanted"></div>
    <div class="unwanted"></div>
    <svg><rect></rect></svg>
    <div class="unwanted"></div>
<div>

How can I get the innerHTML of #container for that svg, so what I get is:

"<svg><rect></rect></svg>"

Answer 1

What you want is the outerHTML of the svg Element but that is not really accessible in this way. Here

outerHTML of an SVG element

is an idea of how to get the svg with content.

Answer 2

This will get you what you want in this case:

document.getElementById('container').getElementsByTagName('svg')[0].innerHTML;

Answer 3

jquery

var container = $("#container").html().find('svg');
// or
 $("#container svg").html();

//return <rect></rect> you can use '<svg>'+container+'</svg>'

javascript

var container = document.getElementById('container');
var svg = container.getElementsByTagName('svg')[0].innerHTML;

//return <rect></rect> you can use '<svg>'+container+'</svg>'

or see @Duopixel's answer on Why .html() doesn't work with SVG selectors using jquery ?

var svg = document.getElementById('svg_root'); // or whatever you call it
var serializer = new XMLSerializer();
var str = serializer.serializeToString(svg);