javascript - 使用 Javascript 获取被点击元素的 HTML

Question

如果单击的元素是容器，我将向单击的元素添加一个类并获取它的 innerHTML。但是如果是HTML元素而不是容器，比如点击的元素是图片<img src="hello.png" />（不是容器，不能使用innerHTML），那么我需要获取对应的元素标签，即需要获取<img src="hello.png" />. 那么无论如何要用纯JavaScript来做到这一点？

PS 我不想在这里使用任何 JavaScript 库。

Answer 1

你可以这样做...

<img src="hello.png" onclick="alert(outerHTML)" />

---

请注意，outerHTML最近才获得 Firefox 支持。

这可能看起来很奇怪，但它确实有效。

演示：http: //jsfiddle.net/2GLjC/

如果您使用不同类型的处理程序（不是内联），您仍然可以outerHTML从元素的上下文中使用。

---

获得更多 Firefox 支持的跨浏览器解决方案可能如下所示......

function getOuterHTML(elem) {
    return elem.outerHTML || document.createElement("div")
                                     .appendChild(elem.cloneNode(true))
                                     .parentNode
                                     .innerHTML
}

因此，只需将您的元素传递给getOuterHTML函数，它就会返回正确的结果。

alert(getOuterHTML(this));