0

Busy building a website that after the user has made several selections, graphs are drawn. I am replacing the inner HTML of a div using javascript to go through the different steps, more specifically as shown below:

document.getElementById('AnyName').innerHTML = content;

This is working in Chrome and Firefox but not in Safari or IE.

At the moment content is defined more or less as below, just an example:

var content = (function () {/*
    <div class="selectNavbar">
    Some HTML and other stuff here
    </div>
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];

I have tried replacing innerHTML with with value/textContent as I saw some people were having trouble with Safari and that seemed to fix it, but the page still failed to load in the new HTML.

I have also used the w3 validator but it seems to be only me using sloppy styles, which I don't believe to be the problem here.

Thanks in advance. If anyone needs I can link all the code, but the source can be viewed in above mentioned link .

Kobus Pitzer
  • 574
  • 1
  • 4
  • 13

1 Answers1

6

I recommend you to go through this first innerText vs innerHtml vs label vs text vs textContent vs outerText

I dont know why you went for innerHTML in the first place. I have seen your page's javascript and it seems all you are doing is updating the text value.

innerHTML is used to put/get elements to/from another element
You can use innerText or textContent which will solve your problem textContent will only work on IE11 so it's better go for innerText

or do something like

var divElement=document.getElementById('id');
var value=document.getElementById('someotherid');
if(divElement.textContent)
  divElement.textContent=value;
else 
  divElement.innerText=value;
Community
  • 1
  • 1
Madhan
  • 5,750
  • 4
  • 28
  • 61
  • Hi Madhan, there is a lot of HTML inside, thats why I went for the innerHTML, will try the innerText and textContent and let you know. – Kobus Pitzer Apr 17 '15 at 20:02
  • 1
    Hi Madhan, it seems you missed my page's javascript as you wouldve known innertext fails when your trying to insert HTML. There is a lot of HTML tags inside, innertext only replaces the div with the text and not HTML parsed code. It looks like I'm viewing the source code. – Kobus Pitzer Apr 17 '15 at 20:07
  • What version of IE you are testing it on – Madhan Apr 17 '15 at 20:13
  • I am using IE 9 at the moment. – Kobus Pitzer Apr 17 '15 at 20:23
  • I have tested it with IE 11 and the site is working fine..Also the way in which the website is built needs to be revamped..innerHTML and innerText are deprecated as per w3c standards.try using `appendChild` `insertBefore` If you still want to go with innerHTML.then go with http://www.optimalworks.net/blog/2007/web-development/javascript/innerhtml-alternative this seems to be a workaround or go with http://domscripting.com/blog/display/99 it has a simple code on how to do that – Madhan Apr 17 '15 at 20:33
  • I will try to follow the guides you posted, however I must use IE 9 as the company that the website is for requires IE 9. – Kobus Pitzer Apr 18 '15 at 07:51