javascript, jQuery and HTML tags: how to check if tags are closed

Question

I've had this problem many times: I create HTML dynamically via jQuery, and in this HTML code I'd like to know if all the tags are properly closed.

If I try to see what's in the DOM with Firebug, it automagically close every tag that is not properly close, so I can't see in the source if all the tags are actually properly closed.

Have you an idea how I could do to find out easily if the HTML code that is dynamically generated is properly closed?

I'm working with a graphist who is always modifying the code and now it's getting quite complex (and long) to sort "by hand" the stuff.

Here's a sample of jQuery script I'd like to check:

  $('#tableau > tbody:last').append(
    '<tr id="tr_'+d.id+'">'+
      '<td id="principal_'+d.id+'" class="principal">' +
        '<div class="texte" style="overflow:hidden;height:\'100%\'">' +
          '<div class="newContainer">' +
            '<div class="container_gauche">' +
              '<div id="annonce_titre">'+ d.id +' - '+ d.titre +'</div>' +
              '<div id="annonce_trait1px"></div>' +
              '<div id="annonce_localisation">Annonce publiée par un ' + type_annonceur + '</div>' +
              '<div class="clear"></div>' +
              '<div id="annonce_description">' + d.texte + '</div>' +
            '</div>' +
            '<div class="container_droite">' +
              '<div class="info">' +
                '<div class="info_gauche">' +  tarif_annonce   + '</div>' +
                '<div class="info_droite">' +
                  '<div class="choix_moderateur" ' + 'id="choix_moderateur_' + d.id +'" >' +
                    '<img src="{$img_check_ok}" />'+
                    '<img src="{$img_check_cancel}" />' +
                  '</div>' +
                '</div>' +
              '</div>' +
              '<div class="clear"></div>' +
              '<div id="annonce_trait1px"></div>' +
              '<div id="annonce_images">' + imgs + '</div>' +
              '<div class="clear"></div>' +
              '<div id="annonce_trait1px"></div>' +
              '<div class="annonce_raison_refus">'+
              '<div class="raison_refus" '+ 'id="raison_refus_' + d.id + '" ' + 'style="display:none;">' +
                '<label>{$raison_du_refus}</label>' +
                '<div class="input_raison_refus">' +
                '<textarea cols="34" rows="10" ' +
                  'name="texte_raison_refus" ' +
                  'id="texte_raison_refus_' + d.id + '" '+
                  'maxlength="2500">' +
                '</textarea>' +
              '</div>' +
              '<div class="">' +
                '<img src="{$img_check_ok}" ' +
                  'class="moderation_refus_ok" ' +
                  'alt="{$alt_img_moderation_refus_ok}" />' +
                '<img src="{$img_check_cancel}" ' +
                  'class="moderation_refus_cancel" ' +
                  'alt="{$alt_img_moderation_refus_cancel}" />' +
              '</div>' +
            '</div>' +
          '</div>' +
        '</div>' +
      '</div>' +
    '</div>'+
  '</td>' +
'</tr>'
  );  

Thank you very much!

Answer 1

You are using jQuery wrong....

Instead of

$('#tableau > tbody:last').append(
    '<tr id="tr_'+d.id+'">'+....

you should do

$('#tableau > tbody:last').append(
    $('<tr>').attr({id:d.id}).append($(...etc..etc..)

The $('<somehtmltag>') will create DOM nodes directly and therefore there is no need to close the tags -- the tag-close only become a problem in the textual HTML representation, so using javascript to generate an HTML document which you then add is both inefficent and causes the problems you describe of possibilities of invalid HTML syntax -- if you use the basic jQuery functions of $('<tag>') .css({}) and .attr({}) you side step all the HTLM parsing problems.

Alternatively use some html templating engine such as http://api.jquery.com/jquery.tmpl/ and when you edit the template as a in a html-sensitive editor, it will highlight the closing tags for you to check you getting it right.