How can I get the plete HTML code of the element I'm mouseovering or clicking? Using document.onmouseover = function(e){ can I get the full underlying HTML code of the element which triggered the event?

Right now, I am able to get the tag name or id or whatever. What I would like is the whole code.

For example; if I'm mouseovering a table, I would like to get the string: <table><tr><td></td></tr></table>

Is this possible?

How can I get the plete HTML code of the element I'm mouseovering or clicking? Using document.onmouseover = function(e){ can I get the full underlying HTML code of the element which triggered the event?

Right now, I am able to get the tag name or id or whatever. What I would like is the whole code.

For example; if I'm mouseovering a table, I would like to get the string: <table><tr><td></td></tr></table>

Is this possible?

• javascript
• html
• dom

6 Answers 6

IE already has element.outerHTML

and this for others:

if (!('outerHTML' in document.documentElement)) {
    function getOuterHTML(element){
        var dummy = document.createElement('html');
        dummy.appendChild(element.cloneNode(true));
        var result = dummy.innerHTML;
        dummy.innerHTML = '';
        return result;
    }
}
else{
    function getOuterHTML(element){
        return element.outerHTML;
    }
}

you can use it like this:

 alert( getOuterHTML( document.getElementById("elementID") ) );

Generally, you would wrap the element with another, and call innerHTML on the wrapper, e.g.:

   document.onmouseover = function(e){
       var el = e.target;
       var p = document.createElement('p');
       p.appendChild(el.cloneNode(true));
       console.log(p.innerHTML);
   }

I would go with @David Murdoch's solution, which seems to be more plete.

It's unclear what you're really asking, but I suspect you just want to get a string containing the HTML for the element you are mousing over. To that end, try the following:

function getMouseOverHTML(event) {
  event = event || window.event;
  return event.currentTarget.parentNode.innerHTML;
}

Then you can do whatever you like with that string of HTML markup.

Do you mean just the structure, or the plete HTML code?

Just for the structure, you can use jQuery's children() function and iterate through them.

For the plete code, Internet Explorer has a property named outerHTML. To make this work in Firefox have a look at http://snipplr./view/5460/outerhtml-in-firefox/.

You can clone the node, then insert it to another node and get the innerHTML for the parent node.

var w = window;

// Change "click" to "mouseover" to experment onmouseover EventListener version
w.addEventListener("click", function(evt)
{
    alert(evt.target.outerHTML);
}, false);

Description:

• w variable stores the element you aim to get the html content from, in this case it is the whole window element and all its children and sub children; of course you can assign to it the element you prefer getting a ref to it as you wish (i.e. getElementById... etc)

• evt.target returns the specific dom element on which you clicked

• .outerHTML returns the element's html; also you may want to replace it with .innerHTML to get the inner HTML (the HTML contained INTO the target element); replace it with innerText to get the inner text only.

• alert() function shows it into an alert message

working example: https://jsfiddle/zajcnezh/

Note that addEventListner is not cross browser patible, my aim was not to do it this way but just to show a potential solution for the question. But if you need it cross browser, it is possible to easy modify the code snippet to achieve this aim too.