title: How do I replace a child DOM element with a table, compatible with internet explorer?
body: <p>I'm trying to figure out how to modify the DOM to replace an element with a table. The following code shows a snafu I ran into: if I try to replace an element with a simple paragraph it works fine, but if I try to use a table then nothing shows up in Internet Explorer 8, although other browsers still work. How can I rewrite the code to make it work across all browsers?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;p&gt;
  &lt;a onclick="replaceElementTest(this);"&gt;Replace this text&lt;/a&gt;
  &lt;/p&gt;
  
  &lt;p&gt;
  &lt;a onclick="replaceWithTableTest(this);"&gt;Replace with test table&lt;/a&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>// Works in all browsers
  function replaceElementTest(domElement){
      var p = document.createElement("p");
      p.innerHTML = "This element got REPLACED!";
      domElement.parentNode.replaceChild(p,domElement);
  }
  
  // Doesn't work in IE8
  function replaceWithTableTest(domElement){
      var table, tr, td;
  
      table = document.createElement("table");
      tr = document.createElement("tr");
      td = document.createElement("td");
      td.innerHTML = "This element got replaced by a TABLE!"
  
      table.appendChild(tr);
      tr.appendChild(td);
  
      domElement.parentNode.replaceChild(table,domElement);
  }
  </code></pre>