Jquery Outerhtml add extra unwanted style

Question

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!

Answer 1

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());
});

Answer 2

Solved the issue. Issue occurs because i added the style via jquery. Logic design issue. Thanks all for the help!