I dynamicall replace a table row inside a tbody element with a new table row.

After I select that row (via its id), both the DOM element and the jQUery Object do not have the tbody as the parentElement.

The error happens on IE8 (which I am force to use, corporate project)

Abbreviated code (assuming the following table structure)

<table>
  <tbody>
    <tr id="POS_32"><td>Bla</td></tr>
    <tr id="POS_33"><td>Bla2</td></tr>
    <tr id="POS_34"><td>Bla3</td></tr>
  </tbody>
</table>

JavaScript:

var $row = $("#POS_33");
var test = "<tr id='POS_33'><td>Some new content</td></tr>";
$row.replaceWith(test);

// re-select the row (could have done that the step before, does not change the effect)
$row = $("#POS_33");

// now $row.length == 1
var tr = $row[0];

// now tr ist the new DOM element

if(tr.parentElement == null) {
  alert("Error");
  // There is no parent element
}
if($row.closest("tbody").length == 0) {
  alert("Error2");
  // tbody cannot be found
}