jquery append: Wie definiere ich die Position innerhalb einer Tabelle?

[Rolf B]

Hallo Jörg,

wenn Du hinter einer bestimmten Zeile einfügen willst, hilft Dir die ID des tbody nicht viel.

<table>
<tbody>
<tr id="abc"><td>...</td><td>...</td><td>...</td></tr>
<tr id="xyz"><td>...</td><td>...</td><td>...</td></tr>

<tr id="foo"><td>...</td><td>...</td><td>...</td></tr>
<tbody>
</table>

Wenn Du hinter xyz was einfügen willst, wo die Leerzeile ist, dann geht das z.B. so:

let newRow = document.createElement("tr");
// hier td-Elemente einfügen

document.getElementById("xyz")
        .insertAdjacentElement("afterend", newRow);

⇒ insertAdjacentElement (Vorsicht beim Anfassen, der Artikel ist noch ganz warm)

Look Ma, no jQuery necessary! But if I must...

let newRow = document.createElement("tr");
// hier td-Elemente einfügen

$("#xyz").after(newRow);
// oder alternativ
$(newRow).insertAfter("#xyz");

RTFM: .after() vs .insertAfter()

Die DOM-Methode insertAdjacentElement ist schon so alt, die kann man generell als existierend voraussetzen.

Einfügen der td-Elemente geht

• am sinnvollsten per Erzeugen von td-Elementen mit createElement, in denen den Inhalt mit textContent eintragen und dann newRow.append(newCell)
• scheinbar einfach durch Aufbau eines Strings mit dem Inhalt "<td>...</td><td>...</td>...", den man in newRow.innerHTML speichert. Aber dann muss man aufpassen, was für eine Art Inhalt man einfügt: wenn da spitze Klammern oder ein & drin sind, muss escaped werden.

Aber wenn man die ganze Row schon als String hat, dann geht auch:

$("#xyz").after("<tr><td>...</td><td>...</td><td>...</td></tr>");

Rolf