如何获取元素的HTML

Question

例如我有：

<div id="f" style="width:50px; height:50px; background-color:#ddd">
    <p>Some text</p>
</div>

我想获得<div id="f" style="width:50px; height:50px; background-color:#ddd">

这是我到目前为止所尝试的：

alert(document.getElementById("f").innerHTML);
alert(document.getElementById("f").outerHTML);

和jsfiddle。

Answer 1

没有直接的方法可以做到这一点。但是，您可以从outerHTML内容中删除innerHTML内容。

document.getElementById("f").outerHTML.replace(document.getElementById("f").innerHTML,'')

Answer 2

我能想到的最接近的是克隆它，删除所有内容，获取outerHTML，然后从最后删除</div>。

var clone = document.getElementById("f").cloneNode(true);
clone.innerHTML = "";
var html = clone.outerHTML.replace(/<\/div>\s*$/, '');

Answer 3

您几乎可以使用outerHTML获得解决方案。您只想在第一个＆gt;之后拆分返回的字符串。字符，使用JS .split()很容易。

例如：

var html = document.getElementById("f").outerHTML;
var part = html.split(">")[0] + ">";

所以：我得到了整个HTML，将其拆分为＆gt;字符，然后添加＆gt;回来（因为split()将其删除）。

这里是updated fiddle。