title: forcing a dom rerender in ie8
body: <p>I've tried all of the classic ie tricks to get my webpage to rerender the changes that have been made in the dom but nothing has worked. I've already tried </p>
  
  <pre><code>element.className = element.className;
  </code></pre>
  
  <p>as well as accessing some part of the dom I changed but that doesn't work either.</p>
  
  <p>Here's my code. Onload the body calls queryDB and in the html there's a paragraph with the id "plants". So far this code only works correctly on firefox 3 and chrome.</p>
  
  <pre><code>var timeout = 5000; //get new plants every 5 seconds
  
  function queryDB() {
      responseDoc = getXMLFrom("ajax/getallplants.php");
      paragraph = document.getElementById("plants");
      table = document.createElement("table");
      table.setAttribute("class", "viewTable");
  
      //clean up the last query
      cleanUpLastResult(paragraph);
  
      //loop through the responseDoc and dynamically add plants
      if(plantsFound(responseDoc)) {
          for(i = 0; i &lt; responseDoc.documentElement.childNodes.length; i++) {
              currentChild = responseDoc.documentElement.childNodes[i];
  
              row = document.createElement("tr");
              //old way of printing where the whole sci name and common name was just text
              /*paragraph.appendChild(document.createTextNode(responseDoc.documentElement.childNodes[i].firstChild.nodeValue));
              paragraph.appendChild(document.createElement("br"));*/
  
              //newer way of printing where the common name is bolded
              /*paragraph.appendChild(document.createTextNode(currentChild.firstChild.nodeValue + " "));
              commonName = document.createElement("b");
              commonName.appendChild(document.createTextNode(currentChild.getAttribute("commonname")));
              paragraph.appendChild(commonName);
              paragraph.appendChild(document.createElement("br"));*/
  
              //newest way of printing that prints to a table
              col1 = document.createElement("td");
              col1.setAttribute("class", "viewTable");
              col1.appendChild(document.createTextNode(currentChild.firstChild.nodeValue));
  
              col2 = document.createElement("td");
              col2.setAttribute("class", "viewTable");
              col2Bold = document.createElement("b");
              col2Bold.appendChild(document.createTextNode(currentChild.getAttribute("commonname")));
              col2.appendChild(col2Bold);
  
              row.appendChild(col1);
              row.appendChild(col2);
  
              table.appendChild(row);
          }
  
          paragraph.appendChild(table);
  
          paragraph.className = paragraph.className;
          paragraph.firstChild.className = paragraph.firstChild.className;
      }
      else {
          paragraph.appendChild(document.createTextNode("no plants currently entered"));
      }
  
      //re-add the callback
      setTimeout(queryDB, timeout);
  }
  
  function plantsFound(responseDoc) {
      if(responseDoc.documentElement == null) {
          return false;
      }
      else {
          if(responseDoc.documentElement.firstChild.nodeType == 3) {
              //text node so no children
  
              return false;
          }
          else {
              return true;
          }
      }
  }
  
  function cleanUpLastResult(paragraph) {
      //old way of cleaning up where everything was only a childnode of the paragraph
      /*while(paragraph.childNodes.length &gt;= 1) {
          paragraph.removeChild(paragraph.firstChild);
      }*/
  
      /* The three possible cases:
       * 1 first execution time so paragraph has no child
       * 2 nth execution time but nothing was found in db so only a textnode
       * 3 nth execution and there's a whole table to clean up
       */
      if(paragraph.firstChild == null) {
          //nothing there so nothing to delete
      }
      else if(paragraph.firstChild.nodeValue != null) {
          //no table printed, just remove that text node
  
          paragraph.removeChild(paragraph.firstChild);
      }
      else {
          //delete the whole table
  
          table = paragraph.firstChild;
  
          //remove each row
          while(table.childNodes.length &gt;= 1) {
              //remove the two columns in it and their stuff
  
              row = table.firstChild;
  
              col1 = row.firstChild;
              col2 = row.lastChild;
  
              //remove column1 and it's text node
              col1.removeChild(col1.firstChild);
              row.removeChild(row.firstChild);
  
              //remove column2, it's bold node and its text node
              col2.firstChild.removeChild(col2.firstChild.firstChild);
              col2.removeChild(col2.firstChild);
              row.removeChild(row.firstChild);
  
              table.removeChild(row);
          }
  
          //finally delete the table
          paragraph.removeChild(paragraph.firstChild);
      }
  }
  
  function getXMLFrom(url) {
      if(window.XMLHttpRequest) {
          //regular browser
          xmlhttp = new XMLHttpRequest();
      }
      else {
          //ie6
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.open("GET", url, false);
      xmlhttp.send();
      responseDoc = xmlhttp.responseDoc;
  
      if(responseDoc == null) {
          if(window.XMLHttpRequest &amp;&amp; (typeof DOMParser != "undefined")) {
              //firefox
  
              var parser = new DOMParser();
              responseDoc = parser.parseFromString(xmlhttp.responseText, "text/xml");
          }
          else {
              //ie6 or ie7
  
              var doc = new ActiveXObject("Microsoft.XMLDOM");
              doc.async = true;
              doc.loadXML(xmlhttp.responseText);
              responseDoc = doc;
          }
  
          if(responseDoc == null) {
              alert("error in parser xml from: " + url);
          }
  
          return responseDoc;
      }
  }
  </code></pre>
  
  <p>I've also tested the responseDoc and I know I am getting a correct response from getallplants.php which generates an xml representations of various plants. Any ideas on how to fix this? Also, for various reasons I can't use JQuery for this.</p>
  
  <p><strong>edit</strong> I have a quasi-good solution that I found on another SO thread. If I add document.write(document.all[0].innerHTML); to queryDB after I set the table I made to a child of the paragraph. The only problem is that if I do this the page won't refresh every 5 minutes. So if the database it changed this page has to be refreshed which kind of defeats the purpose of having javascript asynchroniously get info from the database.</p>