Mootools 1.3.2 Request.HTML fetch table rows

Question

First off please don't bash me for using old technology (polling) and an old version of Mootools (1.3.2) as I don't have control over these factors.

Ok here's my problem.

I have a page which refreshes every few seconds to fetch new data from the database via AJAX. Ideally the structure of the returned value should be as such:

<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
</tr>

After receiving this table row structure result, I need to append that to the current table in the page which essentially just adds a new record on the table if there are new records. If there's none, then no changes to the table are made.

Currently I am using

var req = new Request.HTML({url: url_to_get_new_rows, 
    onSuccess: function(html, responseHTML) {
        // append table row 'html' here
    }
}).send();

However, the returned value in the 'html' variable that I'm supposed to append at the end of the table only returns

1 2 3 4

This obviously is an undesired behavior as I need the tr and td elements to make it work.

I hope someone could help me with this problem.

THANKS!

Answer 1

Javascript:

new Request.HTML({
    url:'tr.php',
    onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript) {
        var tbody = document.id('tbody');

        tbody.set('html', tbody.get('html') + responseHTML);
        // or
        var tr = new Element('table', {'html': responseHTML}).getElement('tr');
        tr.inject(tbody);
    }
}).get();

HTML:

<table>
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
    </thead>
    <tbody id="tbody">
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
        </tr>
    </tbody>
</table>