如何從一個指定的子元素中獲取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);