javascript,jQuery和HTML标记:如何检查标记是否已关闭

Question

我多次遇到过这个问题:我通过jQuery动态创建HTML,在这个HTML代码中,我想知道所有标签是否都已正确关闭.

如果我尝试使用Firebug查看DOM中的内容,它会自动关闭每个未正确关闭的标记,因此如果所有标记实际上都已正确关闭,我无法在源代码中看到它.

如果动态生成的HTML代码已正确关闭,您是否知道如何轻松找到？

我正在和一个总是修改代码的graphist一起工作,现在变得非常复杂(并且很长)来"手动"排序.

这是我要检查的jQuery脚本示例:

  $('#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>'
  );  

非常感谢你!

Answer 1

你使用的 jQuery 是错误的......

代替

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

你应该做

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

$('<somehtmltag>') 将直接创建 DOM 节点，因此不需要关闭标签 - 标签关闭只会成为文本 HTML 表示中的问题，因此使用 javascript 生成 HTML 文档那么 add 既低效又会导致您描述的无效 HTML 语法的可能性的问题 - 如果您使用 $('<tag>') .css({}) 和 .attr({}) 的基本 jQuery 函数步骤所有 HTLM 解析问题。

或者使用一些 html模板引擎，例如 http://api.jquery.com/jquery.tmpl/ ，当您在 html 敏感编辑器中编辑模板时，它会突出显示结束标记，供您检查是否得到它正确的。