Question

我有一个Ajax请求，它返回一个HTML代码，我希望将其放在已生成的HTML中的某个位置。

我尝试使用jQuery.html（）方法，但它没有生成我从服务器收到的HTML。我使用console.log来检查生成的HTML并且它是正确的，但是附加到DOM的HTML仍然与我写的不匹配。

我认为生成的HTML不符合W3C，jQuery验证它，如果错误，会自动尝试修复它。

我停止使用jQuery.html（string）函数并开始使用jQuery.append（string）并获得了我希望的结果。

在有人要求之前，我没有责任编写HTML代码，我只是接受如何编写和执行此操作。

编辑：提供更多信息：

原始HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>System</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link href="/includes/css/global/botoes.css" rel="stylesheet" type="text/css" />
        <link href="/includes/css/global/master.css" rel="stylesheet" type="text/css" />
        <link href="/includes/css/global/menu_horizontal.css" rel="stylesheet" type="text/css" />
        <link href="/includes/css/global/jquery/ui/jquery-ui.min.css" rel="stylesheet" type="text/css" />
        <link href="/includes/css/global/jquery/ui/jquery.ui.datepicker.min.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="/includes/js/global/jquery/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="/includes/js/global/jquery/ui/jquery-ui.min.js"></script>
        <script type="text/javascript" src="/includes/js/global/jquery/ui/jquery.ui.datepicker.min.js"></script>
        <script type="text/javascript" src="/includes/js/global/jquery/ui/i18n/jquery.ui.datepicker-pt-BR.min.js"></script>
        <script type="text/javascript" src="/includes/js/global/jquery/plugins/numeric-pack/jquery.numeric.pack.js"></script>
        <script type="text/javascript" src="/includes/js/global/jquery/plugins/validate/jquery.validate.min.js"></script>
        <script type="text/javascript" src="/includes/js/global/jquery/plugins/validate/additional-methods.min.js"></script>
        <script type="text/javascript" src="/includes/js/global/jquery/plugins/block-ui/jquery.blockUI.js"></script>
        <script type="text/javascript" src="/includes/js/global/jquery/plugins/masked-input/jquery.maskedinput.min.js"></script>
        <script type="text/javascript" src="/includes/js/global/jquery/plugins/sigr/jquery.sigr.js"></script>
        <script type="text/javascript" src="/includes/js/global/jquery/plugins/form/jquery.form.min.js"></script>
        <script type="text/javascript" src="/includes/js/global/menu.js"></script>
        <script type="text/javascript" src="/includes/js/global/sigr-util.js"></script>
        <meta name="titulo" content="SIGR - Sistema Integrado Gestor de Relat&oacute;rios" />
        <meta name="subtitulo" content="Interna&ccedil;&atilde;o Domiciliar" />
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript">
            var codigoUsuario = '';
            var codigoPerfilAcesso = '';
            var urlRelatorio = 'gerarRelatorioInternacaoDomiciliarAjax.do';
        </script>
        <script type="text/javascript" src="internacaoDomiciliar.js"></script>
    </head>
    <body>
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td bgcolor="#CC092F"><img src="logomarca.jpg"></td>
                <td align="right" bgcolor="#CC092F"><img src="trama1.jpg"></td>
            </tr>
            <tr>
                <td bgcolor="#A80000">&nbsp;</td>
                <td align="right" bgcolor="#A80000">
                <div class="infoFuncionarioMenu">v1.0.0</div>
                <img src="tronco.jpg">
            </td>
            </tr>
            <tr><td align="left" colspan="2"></td></tr>
        </table>
        <table id="tabela_principal">
            <tr>
                <td><img src="sigr.png" /></td>
            </tr>
            <tr>
                <td>
                    <span class="subtitulo">Subtitle</span>
                </td>
            </tr>
            <tr>
                <td id="celulaMensagens">
                    <div id="msgErros" class="mensagens_erro fadeOutAndEmpty"></div>
                    <div id="msgSucesso" class="mensagens_sucesso fadeOutAndEmpty"></div>
                </td>
            </tr>
            <tr>
                <td>
                    <table id="tabela_principal">
                        <tr>
                            <td>
                                <form id="form" name="internacaoDomiciliarForm" action="internacaoDomiciliar.do" method="post">
                                    <table width="95%" id="tabela_interna">
                                        <thead>
                                            <tr valign="middle">
                                                <th colspan="6">Report</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr valign="middle" class="infos">
                                                <td width="8%" align="left" class="td_label">Data Inicial</td>
                                                <td width="25%" align="left" class="td_dados">
                                                    <input type="text" name="filtro.dataInicial" size="12" maxlength="10" value="" id="dataInicial" class="data"/>
                                                </td>
                                                <td width="8%" align="left" class="td_label">Data Final</td>
                                                <td width="25%" align="left" class="td_dados">
                                                    <input type="text" name="filtro.dataFinal" size="12" maxlength="10" value="" id="dataFinal" class="data"/>
                                                </td>
                                                <td width="9%" align="left" class="td_label">Refer&ecirc;ncia</td>
                                                <td width="25%" align="left" class="td_dados">
                                                    <select name="filtro.referencia" id="referencia" class="numerico">
                                                        <option value="">-- Selecione --</option>
                                                        <option value="1">Data Fim Internação Prorrogação</option>
                                                        <option value="2">Data Recebimento Relatório</option>
                                                        <option value="3">Data Resposta Internação Domiciliar</option>
                                                        <option value="4">Data Resposta Visita</option>
                                                        <option value="5">Data Solicitação</option>
                                                        <option value="6">Data Avaliação Solicitação Internação Domiciliar</option>
                                                        <option value="7">Data Solicitação Visita</option>
                                                        <option value="8">Data Última Visita</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                               <td width="8%" align="left" class="td_label">Cart&atilde;o</td>
                                               <td width="25%" align="left" class="td_dados">
                                                  <input type="text" name="filtro.cartao" size="25" maxlength="15" value="" id="cartao" class="numerico"/>
                                               </td>
                                               <td width="8%" align="left" class="td_label">Nome Segurado</td>
                                               <td width="59%" colspan="3" align="left" class="td_dados" id="txtNomeDoSegurado"></td>
                                           </tr>
                                           <tr>
                                               <td width="8%" align="left" class="td_label">Estipulante</td>
                                               <td width="25%" align="left" class="td_dados">
                                                  <input type="text" name="filtro.estipulante" size="25" maxlength="15" value="" id="estipulante" class="numerico"/>
                                               </td>
                                               <td width="8%" align="left" class="td_label">Nome Estipulante</td>
                                               <td width="59%" colspan="3" align="left" class="td_dados" id="txtNomeEstipulante"></td>
                                           </tr>
                                           <tr>
                                               <td width="8%" align="left" class="td_label">Referenciado</td>
                                               <td width="25%" align="left" class="td_dados">
                                                  <input type="text" name="filtro.referenciado" size="25" maxlength="15" value="" id="referenciado" class="numerico"/>
                                               </td>
                                               <td width="8%" align="left" class="td_label">Nome Referenciado</td>
                                               <td width="59%" colspan="3" align="left" class="td_dados" id="txtNomeReferenciado"></td>
                                           </tr>
                                           <tr>
                                               <td width="8%" align="left" class="td_label">Solicita&ccedil;&atilde;o</td>
                                               <td width="25%" align="left" class="td_dados">
                                                   <input type="text" name="filtro.solicitacao" size="25" maxlength="15" value="" id="solicitacao" class="numerico"/>
                                               </td>
                                               <td width="8%" align="left" class="td_label">Senha</td>
                                               <td width="59%" colspan="3" align="left" class="td_dados">
                                                   <input type="text" name="filtro.senha" size="25" maxlength="15" value="" id="senha"/>
                                               </td>
                                           </tr>
                                       </tbody>
                                   </table>
                                   <br />
                                   <table width="95%" id="tabela_botoes">
                                       <tr>
                                           <td width="100%" align="center">
                                               <button class="margem_botoes">Consultar</button>
                                               <button class="margem_botoes" type="reset">Limpar</button>
                                               <a href="/"><button class="margem_botoes navegavel" type="button">Voltar</button></a>
                                           </td>
                                       </tr>
                                   </table>
                               </form>
                           </td>
                       </tr>
                       <tr id="respostaRelatorio" style="width: 100%; display: block; overflow: auto;"></tr>
                   </table>
               </td>
            </tr>
        </table>
        <div id="carregando" style="display: none;">
            <p style="font-weight: bolder; color: white;">Carregando...</p>
            <img src="bradesco.gif" width="70" height="65" />
        </div>
    </body>
</html>

提交Ajax后生成的HTML：

    <table class="tabela_interna" border="1">
    <thead>
        <tr class="titulo">
            <th>Dias</th>
            <th>Observa&ccedil;&atilde;o</th>
            <th>Cidade</th>
            <th>Cart&atilde;o</th>
            <th>Nome</th>
            <th>Data Nascimento</th>
            <th>Patologia</th>
            <th>Sexo</th>
            <th>Solct c/ Liminar Judicial</th>
            <th>UF Int Dom</th>
            <th>Cod Prest Visit Dom</th>
            <th>Nome Prest Visit Dom</th>
            <th>Cod Prest Int Dom</th>
            <th>Nome Prest Int Dom</th>
            <th>Tempo Int</th>
            <th>Status</th>
            <th>Ramo</th>
            <th>Solct Autorizada Dir</th>
            <th>Cod Estipulante</th>
            <th>Nome Estipulante</th>
            <th>Rec&eacute;m-nato</th>
            <th>Data Receb Rel</th>
            <th>Data Fim Prorrog</th>
            <th>Data Solct</th>
            <th>Data Solct Visit</th>
            <th>Data Resp Visit</th>
            <th>Data Solct Aval Prest ID</th>
            <th>Data Resp Aval Prest ID</th>
            <th>Data Anals Visit Med</th>
            <th>Data Anals Aval Prest ID</th>
            <th>Aut Estipulante</th>
            <th>Cod Procedimento</th>
            <th>Nro Solct</th>
            <th>Program Atend Dom</th>
            <th>Senha Aut</th>
            <th>Local Int Hosp</th>
            <th>Client Concierge</th>
            <th>Senha Dom Ant</th>
            <th>Taxa Liminar</th>
            <th>SNE</th>
            <th>TQT</th>
            <th>Dep&ecirc;nd O2</th>
            <th>VM/BIPAP</th>
            <th>&Uacute;cera de Dec&uacute;bito</th>
            <th>GTT</th>
            <th>Fisio</th>
            <th>ATB Alto Custo</th>
            <th>Curativo</th>
            <th>Dieta Industr.</th>
            <th>Fono</th>
            <th>Indica&ccedil;&atilde;o Cl&iacute;nica</th>
            <th>Obs Int Dom</th>
            </tr>
    </thead>

            <tr align="left" class="off">
            <td>10</td>
            <td>Teste</td>
            <td>RJ</td>
            <td>13246467978</td>
            <td>Guilherme</td>
            <td>29/11/13</td>
            <td>Infecciosa</td>
            <td>M</td>
            <td>N</td>
            <td>MG</td>
            <td>2011</td>
            <td>Guilherme</td>
            <td>431596</td>
            <td>Philippe</td>
            <td>30</td>
            <td>liberada</td>
            <td>870</td>
            <td>N</td>
            <td>65</td>
            <td>dudu</td>
            <td>N</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td></td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>N</td>
            <td>13246467978</td>
            <td>546</td>
            <td>24 horas</td>
            <td>2f584</td>
            <td>america</td>
            <td>N</td>
            <td>5ffdf</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td></td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>DN: ; DC: ; DA: 24/06/2013; DAT: ; I: ; P: ; GR: </td>
            <td>teste</td>
            </tr>

        <tr align="left" class="">
            <td>10</td>
            <td>Teste</td>
            <td>RJ</td>
            <td>13246467978</td>
            <td>Guilherme</td>
            <td>29/11/13</td>
            <td>Infecciosa</td>
            <td>M</td>
            <td>N</td>
            <td>MG</td>
            <td>2011</td>
            <td>Guilherme</td>
            <td>431596</td>
            <td>Philippe</td>
            <td>30</td>
            <td>liberada</td>
            <td>870</td>
            <td>N</td>
            <td>65</td>
            <td>dudu</td>
            <td>N</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td></td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>N</td>
            <td>13246467978</td>
            <td>546</td>
            <td>24 horas</td>
            <td>2f584</td>
            <td>america</td>
            <td>N</td>
            <td>5ffdf</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td></td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>DN: ; DC: ; DA: 24/06/2013; DAT: ; I: ; P: ; GR: </td>
            <td>teste</td>
        </tr>

        <tr align="left" class="off">
            <td>10</td>
            <td>Teste</td>
            <td>RJ</td>
            <td>13246467978</td>
            <td>Guilherme</td>
            <td>29/11/13</td>
            <td>Infecciosa</td>
            <td>M</td>
            <td>N</td>
            <td>MG</td>
            <td>2011</td>
            <td>Guilherme</td>
            <td>431596</td>
            <td>Philippe</td>
            <td>30</td>
            <td>liberada</td>
            <td>870</td>
            <td>N</td>
            <td>65</td>
            <td>dudu</td>
            <td>N</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td></td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>N</td>
            <td>13246467978</td>
            <td>546</td>
            <td>24 horas</td>
            <td>2f584</td>
            <td>america</td>
            <td>N</td>
            <td>5ffdf</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td></td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>DN: ; DC: ; DA: 24/06/2013; DAT: ; I: ; P: ; GR: </td>
            <td>teste</td>
        </tr>

        <tr align="left" class="">
            <td>10</td>
            <td>Teste</td>
            <td>RJ</td>
            <td>13246467978</td>
            <td>Guilherme</td>
            <td>29/11/13</td>
            <td>Infecciosa</td>
            <td>M</td>
            <td>N</td>
            <td>MG</td>
            <td>2011</td>
            <td>Guilherme</td>
            <td>431596</td>
            <td>Philippe</td>
            <td>30</td>
            <td>liberada</td>
            <td>870</td>
            <td>N</td>
            <td>65</td>
            <td>dudu</td>
            <td>N</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td></td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>N</td>
            <td>13246467978</td>
            <td>546</td>
            <td>24 horas</td>
            <td>2f584</td>
            <td>america</td>
            <td>N</td>
            <td>5ffdf</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td></td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>DN: ; DC: ; DA: 24/06/2013; DAT: ; I: ; P: ; GR: </td>
            <td>teste</td>
        </tr>

        <tr align="left" class="off">
            <td>10</td>
            <td>Teste</td>
            <td>RJ</td>
            <td>13246467978</td>
            <td>Guilherme</td>
            <td>29/11/13</td>
            <td>Infecciosa</td>
            <td>M</td>
            <td>N</td>
            <td>MG</td>
            <td>2011</td>
            <td>Guilherme</td>
            <td>431596</td>
            <td>Philippe</td>
            <td>30</td>
            <td>liberada</td>
            <td>870</td>
            <td>N</td>
            <td>65</td>
            <td>dudu</td>
            <td>N</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td></td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>29/11/13</td>
            <td>N</td>
            <td>13246467978</td>
            <td>546</td>
            <td>24 horas</td>
            <td>2f584</td>
            <td>america</td>
            <td>N</td>
            <td>5ffdf</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td></td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>N</td>
            <td>DN: ; DC: ; DA: 24/06/2013; DAT: ; I: ; P: ; GR: </td>
            <td>teste</td>
        </tr>
</table>

执行Ajax请求的函数：

function carregaConteudoViaAjax(idElemento, url, dados) {
    $.ajax({
        url : url,
        dataType : "html",
        data: dados,
        type: "POST",
        async : false,
        cache : false,
        success : function(result, statusRequestAjax, xhr) {
            console.log(result);
            $(idElemento).append(result);
        },
        error : function(xhr, statusRequestAjax, error) {
            $("#msgErros").html(error);
        },
        complete : function() {
        }
    });
}

Answer 1

jQuery's .html() function is just a wrapper around the browser's native Element.innerHTML property. 浏览器处理格式错误的HTML输入，就像在无JavaScript页面上一样。

.html()和.append()在语义上也不同。前者取代内容;后者附加内容。

jQuery.html（）方法是否验证作为参数传递的HTML？

1 个答案: