Search code examples
jqueryouterhtml

Jquery Outerhtml add extra unwanted style

i have the following code to get the html code when i clicked on a element, for e.g. < p> 

$('#button').click(function(){
     var a = $(this).wrap('<div></div>').parent().html(); 
     alert(a);
});

when a button is clicked, i want to get the content of the element i am clicking.

For first click, i am able to get exactly what i wanted. However when i clicked the 2nd time, i realize that some extra style is added to the element.

Example: style="background-color:transparent;border-top-width:0 etc"

Why is this happening? Will appreciate any enlightenment!

Solution

  • There's no need to wrap your element in a div, then find your element's parent (the div) and retrieve the HTML out of that. You can simply grab the HTML right out of your element, like this:

    $('#button').click(function(){
     alert(this.innerHTML);
});

    Or you could do this (more jQuery-ish):

    $('#button').click(function(){
     alert($(this).html());
});