JSFiddle - React, Tailwind, and code Playground

by mheim

HTML

<h1>
  Example 1:
</h1>
<table>
  <tr>
    <td>Testcase 1</td><span>Span is moved outside table by browser</span>
  </tr>
</table>

<table>
  <tr>
    <td>Testcase 2</td>
    <td><span id="testcase2">Span remains inside table, even though JavaScript essentially creates dom-structure as in testcase 1</span></td>
  </tr>
</table>

<hr>
<h1>
  Example 2:
</h1>
<p style="color:red">Red paragraph with a <table>
    <tr>
      <td>Table</td>
      <td>inside</td>
    </tr>
  </table>that gets moved outside paragraph, just like this text at the end of the paragraph.
</p>

<div id="testcase4">Red div with a <table>
    <tr>
      <td>Table</td>
      <td> that remains inside</td>
    </tr>
  </table>when the div is replaced with a paragraph through JavaScript.
</div>

CSS

tr>span {
  display: table-cell;
}

/*decoration only*/
table tr>* {
  border: 1px solid black
}

#testcase4 {
  color: red
}

JavaScript

$("#testcase2").unwrap();

$("#testcase4").wrap("<p id='testcase4'></p>").contents().unwrap();