如何从一个指定的子元素中获取innerHTML

Question

所有：

我想做的是：

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

我如何获取该svg的#container的innerHTML，所以我得到的是：

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

Answer 1

您想要的是svg元素的externalHTML，但实际上不能以这种方式访问​​。 这里

SVG元素的externalHTML

是关于如何获取内容的svg的想法。

Answer 2

在这种情况下，这将为您提供所需的东西：

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>'

或参阅@Duopixel关于为什么.html（）无法与使用jquery的SVG选择器一起使用的答案？

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