title: Adding content to a table row (<TR>) with javascript?
body: <p>I have a table as follows:</p>
  
  <pre><code>&lt;table&gt;
   &lt;tr&gt;
     &lt;td&gt;col 1&lt;/td&gt;&lt;td&gt;col2&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr id="insert"&gt;
     &lt;td&gt;field&lt;/td&gt;&lt;td&gt;Field 2&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
     &lt;td&gt;another field&lt;/td&gt;&lt;td&gt;one more field&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Now the issue is that I need to dynamically insert new rows AFTER the middle row (id = insert). I have a custom javascript function to insert elementsAFTER an element by using an insertBefore call on the next element.</p>
  
  <p>The new rows create successfully using the following javascript:</p>
  
  <pre><code>var new_row = document.createElement('tr');
  new_row.innerHTML="&lt;td&gt;test&lt;/td&gt;";
  insertAfter(document.getElementById("insert"), new_row);
  </code></pre>
  
  <p>However, the new row refuses to accept any simple html formatting using the innerHTML. The final output of the new row looks something like:</p>
  
  <pre><code>&lt;tr&gt;test&lt;/tr&gt;
  </code></pre>
  
  <p>You see it doesn't want to output the  I have specified. The actual script is a lot more complex and so unfortunately manually adding each  using an appendChild or similar function would be far too time consuming and probably rather resource intensive. Is there anyway I can just add a 'chunk of html' to this table row and in this chunk define the table columns?</p>
  
  <p>I'm baffled, any help is MUCH appreciated.</p>