CODEWITHSUNDEEP
javascripthtmlinternet-explorer
Emil Borconi
Emil Borconi

Reputation: 3467

IE innerHTML changing content?

I have a problem and I consider it quite BIG.

.innerHTML in IE produces unexpected result, literally altering the DOM content.

I'm not speaking here about the know facts which are mentioned in jQuery documentation as well, that it looses the quotes for numeric fields only, I'm speaking of totally changed element construction

Have a look at the following JSFiddle for best explanation.

Let's say we have an element which looks like:

<div id=container>
    bla bla bla some text
    <div class="cust_checkbox" custom-data="my_daya" style="width:16px;display:inline-block;"><div class="pip_kap" custom_ert="order"></div></div>
   more text
</div>

If we get the innerHTML of container we expect to have:

bla bla bla some text
    <div class="cust_checkbox" custom-data="my_daya" style="width:16px;display:inline-block;"><div class="pip_kap" custom_ert="order"></div></div>
   more text

But IE returns:

bla bla bla some text
    <div class="cust_checkbox" style="width: 16px; display: inline-block;" custom-data="my_daya"><div class="pip_kap" custom_ert="order"></div></div>
   more text

As you can see it have totally altered the construction of the cust_checkbox by replacing the order of the class, style and custom-data fields.

I have re-read the innerHTML documentation (even on MSDN website) but there is no mention of this possible behaviour.

Is this right????

This costed me a few hours, (I had some text string functions which were searching for a specific element with specific class and custom data) and as you can imagine it never worked in IE....

Upvotes: 1

Views: 204

Answers (1)

a better oliver
a better oliver

Reputation: 26828

After the DOM has been constructed the source code has no relevance whatsoever. The order of attributes has no influence on how the page is rendered neither has whitespace between them. So there's no need to keep such information.

The attributes of an element are stored in a NamedNodeMap that is not maintained in any particular order. Chrome seems to store the attributes in the order they appear in the source code, IE sorted by name, native attributes first. But if you add an attribute at runtime IE adds it at the end.

The serialization itself is also defined in the HTML spec

While the exact order of attributes is UA-defined, and may depend on factors such as the order that the attributes were given in the original markup, the sort order must be stable, such that consecutive invocations of this algorithm serialize an element's attributes in the same order. So maybe the order is the result of the IE's parsing process.

So as long as you always get the same results the behavior is correct.

Unsurprisingly you will notice the different order of the attributes in the DOM inspector of a browser as well. Example using IE:

Source code:

<button type="button" class="btn btn-default" id="newComment">

DOM Explorer: enter image description here

innerHTML:

<button class="btn btn-default" id="newComment" type="button" test="test">

Upvotes: 2

Related Questions