Question

I am adding a class to the clicked element and getting the innerHTML of it, if the clicked element is a container. But if it is a HTML element and not a container,
For eg., if the clicked element is an image <img src="hello.png" />(which is not a container and cannot use innerHTML), then i need to get the corresponding element tag, i.e. i need to get <img src="hello.png" />. So anyway to do this with pure JavaScript?

P.S. I don’t want to use any JavaScript libraries here.

Answer 1

You can do it like this…

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

---

Note that outerHTML only recently gained Firefox support.

This may look odd, but it does work.

DEMO: http://jsfiddle.net/2GLjC/

If you use a different type of handler (not inline), you could still use outerHTML from the context of the element.

---

A cross-browser solution to pick up more Firefox support could look like this…

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

So just pass your element to the getOuterHTML function, and it should return a correct result.

alert(getOuterHTML(this));