.append() .html() issue with IE8 (for img html or other code without text)
in Using jQuery
•
12 years ago
I found an issue using .append(htmlstring) or .html(htmlstring) methods on IE8.
Only those element placed after a text that have to be visualized are correctly rendered.
Examples...:
#1 This doesnt work (html is appended but image is not visible)
$("#DtlBox_01").append("<img src=\"/Content/Images/test.png\" alt=\"testImg\" />")
#2 This work (html is appended and image is correctly visible)
$("#DtlBox_01").append("SOMETEXT <img src=\"/Content/Images/test.png\" alt=\"testImg\" />")
#3 In this example Only second image is visible
$("#DtlBox_01").append("<img src=\"/Content/Images/test.png\" alt=\"one\"/> sometext <img src=\"/Content/Images/test.png\" alt=\"two\"/>")
Actually this is the workaround I have found:
$("#DtlBox_01").append("<span style=\"visibility:hidden\">-</span><img src=\"/Content/Images/test.png\" alt=\"testImg\" />")
Other info:
-1-This seems to be a render/dom problem because if i replace \"visibility:hidden\" whit \"display:none\" image doesn't appear maybe because span text is not rendered and not included into dom so there is no "visible" text before image object.
-2-Rendering issue exist also replacing img objects with simple div tag...
with this code only second div is correctly rendered with his red BG
$("#DtlBox_01").append("<div style=\"width:20px;height:20px;background-color:red\" ></div> sometext <div style=\"width:20px;height:20px;background-color:red\" ></div>")
regards
1