Question

I am using IE 8 and trying to set an an elements Id attribute. I then append that element to a parent element and check it’s innerHTML. The problem I see is that the id attribute is missing double quotes. At first I thought this might be cause i was using setAttribute property and that might be buggy in IE 8, so i used jQuery to set attribute values but the problem was still there. Heres my code…

            var imgId="my" + val_imgarea + "img";
            var img=document.createElement('img');
            $(img).attr("Id",imgId);
            img.setAttribute('src',name);
            img.setAttribute('style',"width:100%;height:100%");
            $(img).click(function(){clic(imgId);});

            var input=document.createElement('input');
            input.setAttribute('type','text');
            input.setAttribute('id',name);
            input.setAttribute('style',"display:none");

            var parent=document.getElementById(newArea);
            parent.appendChild(img);
            parent.appendChild(input);

            alert($("#"+newArea).html());

output is

<IMG id=my21img style="width:100%;height:100%" src="a/img.jpg" />

I need the double quotes with the id cauze I then write this html to a file and then some other applications read it and its causing problems cauze of the missing quotations.

Answer 1

HTML doesn’t require attributes to be wrapped with quotes, IE 8 and lower returns attributes without quotes unless they have white space in them. The other applications parsing this HTML are clearly not HTML parsers and, if they are intended to be, the fault needs fixing with them.

‘In certain cases, authors may specify the value of an attribute without any quotation marks. The attribute value may only contain letters (a-z and A-Z), digits (0-9), hyphens (ASCII decimal 45), periods (ASCII decimal 46), underscores (ASCII decimal 95), and colons (ASCII decimal 58). We recommend using quotation marks even when it is possible to eliminate them.’

• http://www.w3.org/TR/html4/intro/sgmltut.html#attributes

Note that, in your output, you have a closing slash / at the end of the <IMG tag. Internet Explorer doesn’t put those in either (I don’t think any browser does). This is an XML idiom and also not required for HTML.