Revision 898849 of HTMLTableElement.insertRow()

<div>
<div>
<div>{{APIRef("HTML DOM")}}</div>
</div>
</div>

<p>The <strong><code>HTMLTableElement.insertRow()</code></strong> method inserts a new row in the table.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">
var <em>row</em> = <em>HTMLTableElement</em>.insertRow(<em>optional index = -1</em>);</pre>

<ul>
 <li><a href="/en-US/docs/DOM/HTMLTableElement"><code>HTMLTableElement</code></a> is a reference to a HTML table element.</li>
 <li><code>index</code> is the row index of the new row.</li>
 <li><code>row</code> is assigned a reference to the new row. A reference to <a href="/en-US/docs/Web/API/HTMLTableRowElement">HTMLTableRowElement</a>.<br />
  If <code>index</code> is -1 or equal to the number of rows, the row is appended as the last row. If <code>index</code> is greater than the number of rows, an IndexSizeError exception will result. If index is omitted it defaults to -1.</li>
 <li>If a table has multiple <code>tbody</code> elements, by default, the new row is inserted into the last <code>tbody</code>. To insert the row into a specific <code>tbody</code>:<br />
  <code>var <em>specific_tbody</em>=document.getElementById(<em>tbody_id</em>);<br />
  var <em>row</em>=specific_tbody.insertRow(<em>index</em>)</code></li>
</ul>

<h2 id="Example">Example</h2>

<pre class="brush:html">
&lt;table id="TableA"&gt;
&lt;tr&gt;
&lt;td&gt;Old top row&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;script type="text/javascript"&gt;

function addRow(tableID) {
  // Get a reference to the table
  var tableRef = document.getElementById(tableID);

  // Insert a row in the table at row index 0
  var newRow   = tableRef.insertRow(0);

  // Insert a cell in the row at index 0
  var newCell  = newRow.insertCell(0);

  // Append a text node to the cell
  var newText  = document.createTextNode('New top row');
  newCell.appendChild(newText);
}

// Call addRow() with the ID of a table
addRow('TableA');

&lt;/script&gt;</pre>

<p>To be valid in an HTML document, a TR must have at least one TD element.</p>

<p>Note that <code>insertRow</code> inserts the row directly into the table and returns a reference to the new row. The row does not need to be appended separately as would be the case if <code><a href="/en-US/docs/DOM/document.createElement">document.createElement()</a></code> had been used to create the new TR element.</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Specification</th>
   <th>Status</th>
   <th>Comment</th>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}}</td>
   <td>{{Spec2("DOM2 HTML")}}</td>
   <td>Specifies in more detail where the row is inserted.</td>
  </tr>
  <tr>
   <td>{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}</td>
   <td>{{Spec2("DOM1")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>4</td>
   <td>3<sup>[1]</sup></td>
   <td>5.5</td>
   <td>10</td>
   <td>4</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Starting with Gecko 20.0 {{geckoRelease("20.0")}} the index argument has been made optional and defaults to -1 as per HTML specification.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{domxref("HTMLTableRowElement.insertCell()")}}</li>
</ul>