jQuery: html() function does not match real HTML

Question

I am trying to get the EXACT html content of a div.

When using the html() function from jQuery, the result does not match the actual content.

Please check this fiddle and click on the black square:

The code:

<div id="mydiv" style="width:100px; height: 100px; background-color:#000000; cursor:pointer;">

    <div id="INSIDE" style="background-color:#ffffff; border-style:none;"></div>

</div>

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

jQuery change the color to RGB format and remove the border-style attribute.

How can I solve this problem?

Browsers do this translation when parsing HTML to create the DOM. — Barmar
– Barmar, Commented Jul 15, 2013 at 16:13
As documented: This method uses the browser's innerHTML property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters. — Matt Ball
– Matt Ball, Commented Jul 15, 2013 at 16:14
Your fiddle is returning the exact html from inside the clicked item, do you want it to return html for the container as well? — kkemple
– kkemple, Commented Jul 15, 2013 at 16:15

Quentin · Accepted Answer · 2013-07-15 16:13:49Z

9

The browser consumes the HTML, generates a DOM, then discards the HTML. innerHTML (which is what .html() eventually hits) gives a serialisation of the DOM back to HTML.

If you want to get the raw HTML, then you'll need to use XMLHttpRequest to fetch the source code of the current URL and then process it yourself.

answered Jul 15, 2013 at 16:13

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nullability · Accepted Answer · 2013-07-15 20:54:05Z

1

What you want to do is unfortunately not possible. The original HTML is not available after it is parsed by the browser, so you have to jump through some hoops to prevent the browser from processing it.

One possible solution that I've used before is to wrap the HTML in comment tags, which would remain unchanged by the browser. You can then extract the comment using jQuery's .text() method; strip out the comment tags with string replacement; make the necessary changes to the markup; and then inject it back into the document.

The other alternative is to use AJAX to load the HTML. Make sure you set the contentType to 'text' so it doesn't get processed by the browser.

edited Jul 15, 2013 at 20:54

answered Jul 15, 2013 at 16:18

nullability

10.7k3 gold badges47 silver badges64 bronze badges

Collectives™ on Stack Overflow

jQuery: html() function does not match real HTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related