Have Geek Brain

JavaScript getting full element code on mouseover or onclick

How can I get the complete HTML of the element that I click or click? Using document.onmouseover = function(e){

, can I get the complete basic HTML of the element that raised the event?

Right now I can get the tag name or id or whatever. I would like to get all the code.

For instance; if i hover over the table i would like to get the line:<table><tr><td></td></tr></table>

Is it possible?

+2


a source to share


6 answers


IE already has element.outerHTML

and 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") ) );
+5


a source


Typically, you should wrap the element with another and call innerHTML on the wrapper, like this:

   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 more complete.

+3


a source


Do you mean just the structure or the complete HTML?

For structure only, you can use jQuery function children()

and loop through them.

For complete code, Internet Explorer has a property named outerHTML

. To make this work in Firefox take a look at http://snipplr.com/view/5460/outerhtml-in-firefox/ .

+1


a source


It's not clear what you are really asking, but I suspect you just want to get the string containing the HTML for the element you are masking. To do this, try the following:

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

Then you can do whatever you want with that line of HTML markup.

+1


a source


You can clone a node and then paste it into another node and get innerHTML for the parent node.

0


a source 


var w = window;

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

Description:

  • The w variable stores the element from which you want to get the html content, in this case it is the entire window element and all its children and children; of course, you can assign it the element you prefer to be referenced with as you please (i.e. getElementById ... etc.)

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

  • .outerHTML returns html element; also you can replace it with .innerHTML to get inner HTML (HTML containing INTO target element); replace it with innerText to get only the inner text.

    Function

  • alert () shows it in a warning message

working example: https://jsfiddle.net/zajcnezh/

Please note that addEventListner is not cross-browser compatible, my goal was not to do it this way, but simply to show a potential solution to the issue. But if you need it cross-browser, you can easily modify the code snippet to achieve this goal.

0


a source






More articles:


All Articles