Javascript InnerHTML in IE7 messing with INPUT tags

Question

When I receive the innerHTML of an element containing an input[type=text] element the speech marks around the value and id are removed in IE7 i.e.

<input type="text" id="test" value="test" />

Becomes:

<input type="text" id=test value=test />

This would be fine, other than the fact that I am using a JQuery plugin that takes a html segment and binds JSON to it. This means if I have a template:

<div id="template"><input type="text"  value="${ValueToBind}" /></div>

When I retrieve this via document.getElementByID("template").innerHTML i get:

<input type="text"  value=${ValueToBind} />

Thus, if I am binding a string with whitespace i.e. "this is a test" the output is:

<input type="text"  value=this is a test />

Obviously, this is invalid html and causing havoc with my app. What I really need to do it to retrieve the html in the template AS IS, and not have IE try to do anything helpful like remove the " speech marks.

Cheers, Chris.

Answer 1

answered here innerHTML removes attribute quotes in Internet Explorer

Answer 2

If the problem is IE7 specific a quick fix may be to add an IE conditional comment for IE7 with code that re-inserts the quote marks.

Answer 3

I believe this isn't something you can get around directly as the quotemark-less html is just how IE7 represents the DOM node internally.

My view on the best way to ensure you get the exactly right template is to read each attribute of each node yourself rather than the inner html and then write them out with the quote marks.

See

http://stackoverflow.com/questions/1231770/innerhtml-removes-attribute-quotes-in-internet-explorer

for other ideas.

Using jQuery's .html()

http://docs.jquery.com/Attributes/html

would generally be the "jQuery way" to do this also rather than .getElementById