Creating tables dynamically in jQuery

Question

I'm building some <table> data dynamically using jQuery, but I'm getting the following error:

Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3

This happens at the appendTo part of a script that looks like this:

$('<tr />').append(
    /* lots of stuff */
).add(
$('<tr />')
).append(
    /* some more */
).appendTo($tbody);

Where $tbody is $('<tbody />');

Can anyone help me out please? For the sake of completeness, this is the entire code:

$('#visitsContainer').show();

$div = $('<div />').css('margin-top', '7px').css('width', '620px').addClass('groupBox');
$table = $('<table />').attr('cellpadding', '3').attr('cellspacing', '0').attr('width', '620');
$tbody = $('<tbody />');
$('<tr />').append(
    $('<td />').css('width', '45px').attr('valign', 'top').attr('rowspan', '3').attr('align', 'center').append(
        $('<a />').attr('href', '/sparkx/' + userData.username).append(
                $('<img />').attr('src', '/media/profile/40px/' + userData.photo).attr('alt', userData.firstname).attr('border', '1').css('border-color', '#c0c0c0').css('max-width', ' 42px').css('max-height', ' 40px')
        )
    ).add(
    $('<td />').css('border-bottom', '1px dotted #D21C5B').css('border-right', '1px dotted #D21C5B').css('width', '200px').append(
        $('<a />').attr('href', '/sparkx/' + userData.username).append(
            $('<strong />').text(userData.fullname)
        ).add(
            $('<br />')
        ).add(
            userData.city)
        )
    ).add(
    $('<td />').css('border-bottom', '1px dotted #D21C5B').css('width', '110px').append(
        $('<a />').attr('href', '/profile/' + userData.username + '/sendpm').css('line-height', '18px').append(
            $('<img />').attr('src', '/templates/front/default/images/send_new_icon.gif').attr('alt', 'Stuur bericht').attr('border', '0').attr('align', 'left').css('margin-right', '5px')
        ).append(
            'Stuur bericht')
        )
    ).add(
    $('<td />').css('border-bottom', '1px dotted #D21C5B').css('width', '170px').append(
        $('<b />').text(
            'Geplaatst op:')
        ).append(
            ' ' + posted
        )
    ).add(
    $('<td />').css('border-bottom', '1px dotted #D21C5B').css('width', '135px').append(
        (month > 0 ?
            $('<b />').text('Was hier:')
            :
            $('<div />').css('width', '1px').html('&nbsp;')
        )).append(month > 0 ? ' ' + months[month] + ' ' + year : '')
    )
).add(
    (rating > 0 ?
        $('<tr />').append(
            $('<td />').attr('colspan', '4').append(
                $('<strong />').css('color', '#D21C5B').text(userData.firstname + ' vond dit ').append(
                    (rating == 3 ?
                        $('<i />').text('een aanrader ').add(
                        $('<img />').attr('src', '/templates/front/default/images/thumbGood.png').attr('alt', 'Goed').attr('height', '16').css('margin-left', '3px')
                        )
                    : (rating == 2 ? 
                        $('<i />').text('een aanrader ').add(
                        $('<img />').attr('src', '/templates/front/default/images/thumbAvg.png').attr('alt', 'Redelijk').attr('height', '16').css('margin-left', '3px')
                        )
                    :
                        $('<i />').text('slecht ').add(
                        $('<img />').attr('src', '/templates/front/default/images/thumbBad.png').attr('alt', 'Slecht').attr('height', '16').css('margin-left', '3px')
                        )
                    ))
                )
            )
        )
    : '')
).add(
    (content ?
        $('<tr />').append(
            $('<td />').attr('colspan', '4').append(
                $('<div />').css('width', '100%').text(content).add(
                $('<div />').css('float', 'right').css('clear', 'both').append(
                    $('<a />').attr('href', '/guide/editreaction/' + id).append(
                        $('<b />').text('edit')
                    ).add(
                    $('<a />').attr('href', thisURL + '/rr/' + id).css('padding-left', '10px').append(
                        $('<b />').text('delete')
                    ))
                ))
            )
        )
    : '')
).appendTo($tbody);
$tbody.appendTo($table);

$table.appendTo($div);
$div.prependTo($('#visits'));

Solution

I would seriously reconsider what your doing. The mass of script is going to become unmaintainable and seriously hard to debug. Can you not do all this markup creation server side and use ajax to load it into the dom.

The way you have it at the moment is going to encounter performance issues also, especially if you have a large set of data. You are doing creating multiple jquery dom objects and doing multiple appends. It is better to build a string or push to an array and append to the dom only once. Each append causes a redraw which is expensive.

Failing that why not use a dedicated dom creation plugin to make your js more readable.

Another option is to look at jTemplates which will allow you to define the markup outside of the js and then pass in the data to be shown.

You may also consider using one of the grid plugins which are tried and tested and create the table structure for you efficiently. Google jqgrid or flexigrid.

Comments

[user3747201]

Thank you for your suggestions, I will look into them. However, this does not explain why my current code does not work, and I was looking, for the time being anyway, for a quick fix.

[user3747201]

Also, your jTemplates link links to flexigrid.

[redsquare]

There is no real quick fix as the amount of code is quite hard to get my head around what is happening. A url or a replica of the issue would help.

[user3747201]

Ok thanks. I have tried jTemplates, seems to work fairly well.