---
title: HTMLTableElement.insertRow()
slug: Web/API/HTMLTableElement/insertRow
tags:
  - API
  - HTML DOM
  - HTMLTableElement
  - Method
  - Reference
translation_of: Web/API/HTMLTableElement/insertRow
---
<div>{{APIRef("HTML DOM")}}</div>

<p>Die Methode <strong><code>HTMLTableElement.insertRow()</code></strong> fügt einer vorhandenen {{HtmlElement("table")}} eine neue Zeile ({{HtmlElement("tr")}}) hinzu und gibt eine Referenz auf die neue Zeile zurück.</p>

<p>Wenn eine Tabelle mehrere {{HtmlElement("tbody")}} Elemente besitzt, wird die neue Zeile standardmäßig dem letzten <code>&lt;tbody&gt;</code> hinzugefügt. Um sie einem bestimmten <code>&lt;tbody&gt;</code> Element hinzuzufügen, beschaffen Sie sich eine Referenz auf das gewünschte <code>&lt;tbody&gt;</code> Element und rufen Sie <code>insertRow()</code> auf diesem Element auf:</p>

<pre class="brush: js notranslate">let bestimmter_tbody = document.getElementById(tbody_id);
let zeile = bestimmter_tbody.insertRow(index)</pre>



<div class="blockIndicator note">
<p><strong>Anmerkung:</strong> <code>insertRow()</code> fügt die Zeile direkt in die Tabelle ein. Die Zeile muss nicht eigens hinzugefügt werden, wie man es tun müsste, wenn man das <code>&lt;tr&gt;</code> Element mittels <a href="/de/docs/Web/API/Document/createElement"><code>Document.createElement()</code></a> erzeugt hätte.</p>
</div>

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

<pre class="syntaxbox notranslate">var <em>neueZeile</em> = <em>HTMLTableElement</em>.insertRow(<em>index</em>);</pre>

<p>{{domxref("HTMLTableElement")}} ist eine Referenz auf ein HTML {{HtmlElement("table")}} Element.</p>

<h3 id="Parameters">Parameters</h3>

<dl>
 <dt><code>index</code> {{optional_inline}}</dt>
 <dd>Der Zeilenindex der neuen Zeile. Ist der Index <code>-1</code> or gleich der Anzahl der vorhandenen Zeilen, wird die Zeile als letzte Zeile angefügt. Wenn <code>index</code> größer als die Anzahl vorhandener Zeilen ist, führt dies zi einer <code>IndexSizeError</code> Exception. Wird <code>index</code> weggelassen, ist der Standardwert <code>-1</code>.</dd>
</dl>

<h3 id="Rückgabewert">Rückgabewert</h3>

<p><code>neueZeile</code> ist ein {{domxref("HTMLTableRowElement")}}, das die neue Zeile referenziert.</p>

<h2 id="Beispiel">Beispiel</h2>

<p>Dieses Beispiel verwendet <code>insertRow(-1)</code>, um an eine Tabelle eine neue Zeile anzufügen.</p>

<p>Wir verwenden daraufhin {{domxref("HTMLTableRowElement.insertCell()")}}, um der neuen Zeile noch eine Zelle hinzufügen. (Um gültiges HTML zu sein, muss ein <code>&lt;tr&gt;</code> mindestens ein <code>&lt;td&gt;</code> Element enthalten.) Schließlich fügen wir der Zelle mittels {{domxref("Document.createTextNode()")}} und {{domxref("Node.appendChild()")}} Text hinzu.</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html notranslate">&lt;table id="my-table"&gt;
  &lt;tr&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js notranslate">function addRow(tableID) {
  // Beschaffe eine Referenz auf die Tabelle
  let tableRef = document.getElementById(tableID);

  // Füge am Ende der Tabelle eine neue Zeile an
  let newRow = tableRef.insertRow(-1);

  // Erstelle in der Zeile eine Zelle am Index 0
  let newCell = newRow.insertCell(0);

  // Füge der Zelle einen textnode hinzu
  let newText = document.createTextNode('Neue letzte Zeile');
  newCell.appendChild(newText);
}

// Rufe addRow() mit der ID der Tabelle auf
addRow('my-table');</pre>

<h3 id="Result">Result</h3>

<p>{{EmbedLiveSample("Beispiel")}}</p>

<h2 id="Spezifikationen">Spezifikationen</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></td>
  </tr>
  <tr>
   <td>{{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}}</td>
   <td>{{Spec2("DOM2 HTML")}}</td>
   <td>Spezifiziert genauer, wo die Zeile eingefügt wird.</td>
  </tr>
  <tr>
   <td>{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}</td>
   <td>{{Spec2("DOM1")}}</td>
   <td>Initiale Definition</td>
  </tr>
 </tbody>
</table>

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

<div>


<p>{{Compat("api.HTMLTableElement.insertRow")}}</p>
</div>

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

<ul>
 <li>{{domxref("HTMLTableRowElement.insertCell()")}}</li>
 <li>Das HTML Element, das Zeilen repräsentiert: {{domxref("HTMLTableRowElement")}}</li>
</ul>