JQuery - Hardcoding HTML in Javascript - Is there a better way to dynamically create dom elements?

Question

I have a lot of messages, and raw HTML that I hard code in my javascript code, such as:

    var subjectId = $(subject).attr('subjectId'); 
    var subjectName = $(subject).attr('subjectName'); 
    var html = "<table id='invitations' class='invitations' width='100%'><tbody>";
    $(subject).find('group').each( function() {     
        var groupId = $(this).attr('groupId');
        var groupName = $(this).attr('groupName');
        var ownerId = $(this).attr('ownerId');
        var owner = findStudentNameById( subjectId, ownerId );
        html += "<tr>" +
                    "<td width='55px'><img src='images/gplg.png' /></td>" +
                    "<td>" + subjectId + " <span class='subjectName'>" + subjectName + '</span> <br /> '  + groupId + 
                    " - <span class='group'>" + groupName + "</span><br /> Created By "  + owner + "</td>" +
                "</tr>" +
                "<tr>" +
                    "<td width='55px'></td>" +
                    "<td><img class='accept' src='images/accept.png' />" +
                        "<img class='decline' src='images/decline.png' /> " +
                    "</td>" +
                "</tr>";                    
    });
    html += "</tbody></table>";
    return html;

or ...

$('#inviteform').submit( function (){
            var invitesSent = false;
            var html = '<h3>Invitations have been sent to the following people</h3><br /><ul>';
            $('#inviteform').find('input:checkbox').each( function() {
                if ( $(this).is(':checked')){
                    html += '<li>+ <a href="#">' + $(this).val() +'</a></li>';
                    invitesSent = true;
                }
            });
            html += '</ul>';

            if ( !invitesSent ){
                html = '<h3>You did not select any invitees, no invitations have been sent.</h3>';
            }

            $('#content').hide().fadeOut(2000);
            $('#content').html(html).slideDown("slow");
            $('#slogan').html('Congratulations! Your group is now complete. ').fadeIn(2000);

            return false;
        });

This is because I have a 2 main areas of the page (i.e title div, and content div), which I need to change the contents of on the fly. Unfortunately I cant separate this content into different files.

So, is there a best practices behind creating the text and DOM elements for these divs instead of hard coding so much stuff.

Im looking for the most elegant solution, so I don't have so much hard coding.

Thanks

Answer 1

The way it encourages you to hardcode HTML strings is one of my pet hates with jQuery.

I generally just end up using the standard Javascript : document.createElement('TD')

If you are creating a lot of nodes of the same type it's best/faster to cache them and use cloneNode(true) to create the new nodes:

var nodeCache;
    nodeCache.td = document.createElement('TD')

var newTD = nodeCache.td.cloneNode(true);

I understand this isn't makeing much use of jQuery but I think jQuery's way of handling this is inelegant.