如何从一个指定的子 ELEMENT 获取 innerHTML答案

【问题标题】：How to get innerHTML from one specify child ELEMENT如何从一个指定的子 ELEMENT 获取 innerHTML
【发布时间】：2015-05-29 19:29:20
【问题描述】：

全部：

我想做的是：

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

【问题讨论】：

标签： javascript html css dom

【解决方案1】：

您想要的是 svg 元素的 outerHTML，但实际上无法通过这种方式访问。这里

outerHTML of an SVG element

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

【讨论】：

【解决方案2】：

在这种情况下，这将为您提供您想要的：

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

【讨论】：

【解决方案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 在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);

【讨论】：