Closing TABLE tag with jQuery

Question

Is there a way to close a html tag with jQuery?

Like:

<table>
  <tr id="tr1">
    <td>
      hello world!
    </td>
  </tr>
  <tr id="tr2">
    <td>
      hello world again!
    </td>
  </tr>
</table>

js code:

$("#tr1").after("</table><table><tr><td>another table</td></tr></table><table>");

Answer 1

You would need to do something like this:

$("#tr1").nextAll().remove();
$("table").after("<table><tr><td>another table</td></tr></table><table>");

You can give it a try here. .append() is intended to append complete elements, this removes all rows after the first (.nextAll() then .remove()), then appends the new table after the already existing one.

In general .nextAll().remove() will remove all following siblings, so this should be effectively the same as closing the parent tag just after it. It also cleans up any event handlers/data as well.

Answer 2

No you can't. JQuery directly affects the dom, which relates to html, but not the way you're expecting it to.

Of course, you can probably accomplish what you're trying to do differently, but what you're suggesting won't fly.

At render time your browser translates the html code in a tree structure called the dom (document object model). JQuery basically plays with that tree. You can still append html, but the browser will just intepret that into a little tree and connect that to the big tree.

So in fact, anything which you append must, by itself, also be a valid piece. A closing tag by itself is not valid.

To accomplish your intention, create a second table and move your row over to that one.