title: Dynamically insert new rows in the table
body: <pre><code>&lt;script type=&quot;text/javascript&quot; language=&quot;javascript&quot;&gt;
   function addNewRow()
   {
      var table = document.getElementById(&quot;table1&quot;);
      var tr = table.insertRow();
      var td = tr.insertCell();
      td.innerHTML= &quot;a&quot;;
  
      td = tr.insertCell();
      td.innerHTML= &quot;b&quot;;
      
      td = tr.insertCell();
      td.innerHTML= &quot;c&quot;;
      
      td = tr.insertCell();
      td.innerHTML= &quot;d&quot;;
      
      td = tr.insertCell();
      td.innerHTML= &quot;e&quot;;
   }
  &lt;/script&gt;
  &lt;body&gt;
      &lt;table id=&quot;table1&quot; border=&quot;1&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;&gt;
          &lt;tr id=&quot;row1&quot;&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;2&lt;/td&gt;
              &lt;td&gt;3&lt;/td&gt;
              &lt;td&gt;4&lt;/td&gt;
              &lt;td&gt;5&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;input type=&quot;button&quot; onClick=&quot;addNewRow()&quot; value=&quot;Add New&quot;/&gt;
  &lt;/body&gt;
  </code></pre>
  <hr />
  <p>This example is for dynamically insert new row and cells in the table.
  But its behavior is different in all browsers.</p>
  <ol>
  <li><p>Internet Explorer = It add row in the last and new added cells are starts from first.</p>
  </li>
  <li><p>Chrome/Safari = It add new row in the first and new added cells are starts from end.</p>
  </li>
  <li><p>Mozilla Firefox = It is not working.</p>
  <p>I want new added row in the last and new added cells starts from first like (Internet Explorer) in all browsers.</p>
  </li>
  </ol>
  <p>If you have any solution for same behavior please tell me.</p>