Question

Is it possible to obtain the raw HTML of an element or is it possible to get the HTML without the “style” attribute ? Consider the following example,

<div class="outer">
   <div class="inner">
       some text
   </div>
</div>

Now, I apply some animation/CSS to the “inner” element.

​$('.inner').animate({
    'margin': '-10px'
});​​

When I get the HTML of the “outer” element using console.log($('.outer').html());, I get the following

<div class="inner" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">
       some text
   </div>

But, I actually need this only

<div class="inner">
       some text
   </div>

What is the simplest way to get that output ?? I don’t need to create a backup of the element before applying the animate() or css().

Thank you.

Answer 1

If you want to remove the style attribute totally (and don’t want it back), use the code below:

/* Working code */ 
$(".outer").find(".inner").removeAttr('style').end().html();

/* Explanation of working code */
$(".outer")                     // Get the outer element
           .find(".inner")      // Find the inner div
           .removeAttr('style') // Remove the attribute from the inner div
           .end()               // Return to the outer div
           .html();             // Get outer div's HTML

Here’s a working fiddle.

jQuery Docs:

• find()
• removeAttr()
• end()
• html()