innerHTML not working in IE8 using javascript

Question

<div class="dis-opt-box">
 <div class="dis-opt-box-top">
        <form id="frmBook" accept-charset="utf-8" action="http://localhost/parcel3/book" method="post">
        <div class="opt-box-heading">
            <div class="service opt-box-heading-txt">Service</div>
            <div class="price opt-box-heading-txt">Price</div>
            <div class="info opt-box-heading-txt">Info</div>
            <div class="coll-tody opt-box-heading-txt">Collection today</div>
            <div class="printer-needed mt_5">Printer needed</div>
            <div class="enhanced opt-box-heading-txt mt_5">Enhanced compensation</div>
            <div class="drop-off opt-box-heading-txt mt_13">Drop off at <br>Parcelforce <br>Worldwide <br>Depot</div>
  </div>
                                  <div class="economy-services">
                        <h3>Next Day, Pre 9am delivery</h3>
                                                            <div class="service-box">
                                        <div class="service-box-small">
                                            <div class="service-box-small-1"><span class="pl-10">Parcelforce Express 24, Pre 9am</span></div>
                                            <div class="service gray-border">
                                                                                                <img src="/parcel3/web/img/uploads/couriers/parcel2shippf.jpg" alt="Parcelforce Express 24, Pre 9am" title="Parcelforce Express 24, Pre 9am" class="pb-23" />                                            </div>
                                            <div class="price1 gray-border">
                                                <a href="#" class="flyout">&pound;15.99<span style='width:300px;'><div style='float:left; width:250px; text-align:left;'>Base Price: </div><div style='float:left; width:50px; text-align:left;'>&pound;15.99</div><div style='float:left; width:250px; text-align:left;'>Remote Area Charge: </div><div style='float:left; width:50px; text-align:left;'>&pound;0.00</div><div style='float:left; width:250px; text-align:left;'>Number of Packages: </div><div style='float:left; width:50px; text-align:left;'>1</div><div style='float:left; width:250px; text-align:left;'>Sub total: </div><div style='float:left; width:50px; text-align:left;'>&pound;15.99</div><div style='float:left; width:250px; text-align:left;'>VAT: </div><div style='float:left; width:50px; text-align:left;'>&pound;3.20</div><div style='float:left; width:250px; text-align:left;'>Grand Total: </div><div style='float:left; width:50px; text-align:left;'>&pound;19.19</div></span></a>
                                                <div class="red-star">*</div>                                            </div>
                                            <div class="info gray-border ">
                                                <a href="#" class="flyout"><img src="/parcel3/web/img/images/info-icon.png" alt="" /><span>Delivery before 9am on next working day to most of the UK. Door to door service. Each consignment covered for compensation up to a maximum of &pound;50.00 as standard. Trackable on line. Full support and backup. Fast and reliable courier service from a top courier company.</span></a>
                                            </div>
                                            <div class="info gray-border" style="background:none;">
                                            <img src="/parcel3/web/img/images/question.png" alt="Collection today can only be shown when a collection postcode has been supplied" title="Collection today can only be shown when a collection postcode has been supplied" />                                            </div>
                                            <div class="printer-needed gray-border">
                                            <img src="/parcel3/web/img/images/available.png" alt="Available" title="A printer is needed for this service. You will need to print shipping labels and attach them to your parcel" />                                            </div>
                                            <div class="enhanced gray-border">
                                            <img src="/parcel3/web/img/images/available.png" alt="Available" title="Available" />                                            </div>
                                            <div class="drop-off gray-border">
                                            <img src="/parcel3/web/img/images/available.png" alt="Available" title="Available" />                                            </div>
                                        </div>
                                        <div class="green-button">
                                            <button type="button" value="21" class="book" onclick="javascript:addPackageDetails('/parcel3/web/index/addPackageDetails','21');">Book</button>                                        </div>
                                    </div>
                                                    </div>
                                                    <div class="vat-extra">* Plus VAT</div>
                                <div class="clear"></div>
        <input name='data[packageOptions][0]' type='hidden' value='' id='packageOptions_0'/>
        <input name='data[hdnChoosePackage]' type='hidden' value='1'/>
  </form>
    </div>
 <div class="dis-opt-box-bottom"></div>
</div>

This HTML got from Ajax reponse. I just try to add this HTML in DIV using innerHTML. It is working fine in Firefox, IE9, Crome, Safari but doesn't work in IE8.

Can any one help me?

I got this HTML as response and use this code

document.getElementById('chooseDetail').innerHTML = response;

But doesn't work in IE8.

We need to see your full AJAX code, the actual content you are trying to add to the DOM should be irrelevant. — DaveRandom, Apr 04 '12 at 11:32
Your question says "innerHTML" but your code says "innerText". Have you tried innerHTML? — Chris Gessler, Apr 04 '12 at 11:33
http://stackoverflow.com/questions/1344470/why-is-document-getelementbyidtableid-innerhtml-not-working-in-ie8 might prove usefull — Elias Van Ootegem, Apr 04 '12 at 11:41
Is this an issue with IE support for DOM level 2 "capture phase" in event propagation? I know I had a similar sounding issue because of this once. — Andy, Apr 04 '12 at 11:45
Elias Van Ootegem : you are right, but i want to put this html as innerHTML. i think
tag not working in innerHTML. so, can you tell me if any hack to add all this HTML in innerHTML, because it is not working only in IE8? — Jimesh Gajera, Apr 04 '12 at 11:47
Seems to me like a duplicate question, see here: [http://stackoverflow.com/questions/2896208/innerhtml-bug-ie8][1] [1]: http://stackoverflow.com/questions/2896208/innerhtml-bug-ie8 — Bud Damyanov, Apr 04 '12 at 12:44
See here: [http://www.stackoverflow.com/questions/2896208/innerhtml-bug-ie8][1] [1]: http://www.stackoverflow.com/questions/2896208/innerhtml-bug-ie8 — Bud Damyanov, Apr 04 '12 at 12:45
budiony : thanks, its working with using $('#chooseDetail').html(reponse); — Jimesh Gajera, Apr 04 '12 at 12:52

score 0 · Answer 1 · answered Apr 04 '12 at 11:34

0

I think IE8 is a little stricter with the content your inserting, you may have to run innerHTML instead to get this to work.

answered Apr 04 '12 at 11:34

Lee Davis

4,685
3
28
39

Thanks to all. its working fine with $('#chooseDetail').html(reponse); in IE8 also. – Jimesh Gajera Apr 04 '12 at 13:05

score 0 · Answer 2 · answered Apr 04 '12 at 11:59

0

Try replacing your <br> with <br/>. Some IE versions are really strict about having valid HTML tags.

answered Apr 04 '12 at 11:59

Jasper De Bruijn

1,434
7
11

innerHTML not working in IE8 using javascript

2 Answers2