将DOM元素转化为HTML字符串

封装函数

function getHTMLStr(ele) {
    let wrap = document.createElement('div');
    // appendChild是剪切效果，会将原来的元素直接剪切走，因此需要克隆一份
    let eleClone = ele.cloneNode(true);
    wrap.appendChild(eleClone);
    return wrap.innerHTML;
}

这里特别注意，appendChild是剪切效果！无论是从iframe或者是其他地方获取的DOM元素，使用这个方法都会将原来的元素剪切到新的父元素下，比如：

<div><a id="A">aa</a></div>
<div id="B"></div>
a = document.getElementById('A');
b = document.getElementById('B');
b.appendChild(a)
<div>a被剪切到B里面了</div>
<div id="B"><a id="A">aa</a></div>

哪怕A在iframe里面，B在iframe的父页面，也会将a从iframe中剪切到父页面里面。

所以为了应付这种情况，就要对DOM进行一次克隆。

cloneNode()

cloneNode() 方法可创建指定的节点的精确拷贝。

cloneNode() 方法 拷贝所有属性和值。该方法将复制并返回调用它的节点的副本。

如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。

否则（也就是默认值，或者false），它只复制当前节点。

ele.cloneNode(true); 
返回被克隆的元素