Question

I have a table that currently has two columns per row and I need to split it using jQuery.

I tried this:

$(document).ready(function() {
    $('.TextBold').after('</tr><tr>');
});

…but it doesn’t work. I wonder if can add a <p>Test</p> instead of </tr><tr> there?

Here you can see my code in JSFiddle .. http://jsfiddle.net/QjJhU/

I will appreciate if someone can explain the issue.

Answer 1

The problem is that you are imagining that jQuery (and Javascript in general) edits the HTML document. It doesn’t. The browser reads the HTML, then creates a DOM structure from it. At that point, the HTML content is utterly irrelevant. The only thing the browser cares about is the DOM structure.

This means that you can’t add bits of elements: you can only add whole elements (or text nodes) to a document. You’re trying to close one tag (with </tr>) then open another one (with <tr>). In fact, the browser reads </tr><tr> and makes a DocumentFragment out of it. Since the closing tag is invalid on its own, it is removed. Then the <tr> is turned into an entire element in its own right: effectively, <tr></tr>. This is valid HTML, so it is turned into the valid DOM element and that is inserted.

You need to work out a way of removing the td from one tr, creating a new tr and adding the td to it.

Something like this should work:

$('.TextBold').each(function() {
    $('<tr/>').insertAfter(this.parentNode).append($(this).next());
});

This says:

• for each TextBold element, do the following:
  • create a new tr element
  • insert it after the TextBold‘s parent element (which is the tr)
  • append the element that follows the TextBold to the new tr (this also has the effect of removing it from its current position)

Here’s a jsFiddle with this working code.