jQuery 追加插入一个意外的值

Question

我在特定的 WordPress 实例上执行 jQuery("body").append() 指令时遇到一个非常奇怪的问题（不是在所有使用此脚本的 WordPress 站点上），尽管我“追加”了什么（即使在使用 chrome 控制台进行调试时）附加的实际数据也不同。

在我的场景中，我开发了一个 javascript 文件来处理符合 GDPR 规则的最小 cookiebar，它应该与 wordpress 兼容。将 javascript 文件包含到 wordpress 实例后，脚本中的内容将被执行，它将“扫描”（有点复杂，它涉及远程服务和休息 api）页面并生成包含所有 cookie 信息的 cookiebar，以便用户可以只接受所需的 cookie。 Cookibar 代码不是太复杂，但绝对太长 post 在这里，只考虑在它执行该指令的所有逻辑结束时：

jQuery("body").append(calculatedCookiebarHtml);

现在从我的cookiebar坏掉的前提出发，我去掉了所有的cookiebar代码，只留下两行代码

jQuery("body").empty();
jQuery("body").append(HARDCODED_HTML);

其中 HARDCODED_HTML 是 cookiebar 的虚拟示例（这里是未转义的版本）：

<div class="js-cookieBar cookieLaw" id="cookie_bar_main_body">
<div class="js-cookieBarDescription cookiebar">
    <div class="cookie-panel">
        <div class="left">
            <span class="heading">Questo sito <br>utilizza cookie</span>
            <p>Per garantirti la migliore esperienza sul nostro sito in termini di funzionalità, accessibilità, usabilità e prestazioni nonché per ricordare le tue preferenze, ti invitiamo ad installare i cookie opzionali cliccando sul pulsante "Accetta tutti". Se desideri invece gestire le singole opzioni, clicca sul tasto "Impostazioni"</p>
        </div>
        <div class="right">
            <a class="js-cookieBarInfoButton link">Impostazioni <i class="arrow down"/></a>
            <a class="js-cookieBarAcceptAll button">Accetta tutti</a>
        </div>
    </div>
</div>
<div class="js-cookieBarDetail cookiebar">
    <div class="cookie-panel selezionati">
        <p>Vogliamo essere trasparenti sui dati che noi e i nostri partner raccogliamo e sul loro utilizzo, in modo che tu possa averne un controllo ottimale.<br>Per ulteriori informazioni, visita la <a class="js-privacyLink">privacy policy</a> e la <a class="js-policyLink">cookie policy</a>.</p>
        <div class="box-selezionati">
            <div class="selezionati-left">
                <ul class="js-cookieBarList"/>
                <div class="selezionati-bottoni">
                    <div class="js-cookieBarChecks"/>
                    <a class="button button-small rifiuta js-cookieBarDeclineAll">Rifiuta tutti</a>
                    <a class="js-cookieBarSave button button-small">Conferma</a>
                    <p>
                        <span class="js-cookieBarSelected"/>/<span class="js-cookieBarSelectable"/>
                    </p>
                </div>
            </div>
            <div class="selezionati-right">
                <table id="tableCookie" class="js-cookieBarExplain">
                    <tr>
                        <th/>
                        <th>Nome / A cosa serve</th>
                        <th>Scadenza</th>
                        <th>Proprietario</th>
                        <th>Dati inviati in</th>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

这里是带有转义 html 有效负载的确切命令：

$("body").append('<div class=\"js-cookieBar cookieLaw\" id=\"cookie_bar_main_body\">\n\t<div class=\"js-cookieBarDescription cookiebar\">\n\t\t<div class=\"cookie-panel\">\n\t\t\t<div class=\"left\">\n\t\t\t\t<span class=\"heading\">Questo sito <br>utilizza cookie</span>\n\t\t\t\t<p>Per garantirti la migliore esperienza sul nostro sito in termini di funzionalità, accessibilità, usabilità e prestazioni nonché per ricordare le tue preferenze, ti invitiamo ad installare i cookie opzionali cliccando sul pulsante \"Accetta tutti\". Se desideri invece gestire le singole opzioni, clicca sul tasto \"Impostazioni\"</p>\n\t\t\t</div>\n\t\t\t<div class=\"right\">\n\t\t\t\t<a class=\"js-cookieBarInfoButton link\">Impostazioni <i class=\"arrow down\"/></a>\n\t\t\t\t<a class=\"js-cookieBarAcceptAll button\">Accetta tutti</a>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"js-cookieBarDetail cookiebar\">\n\t\t<div class=\"cookie-panel selezionati\">\n\t\t\t<p>Vogliamo essere trasparenti sui dati che noi e i nostri partner raccogliamo e sul loro utilizzo, in modo che tu possa averne un controllo ottimale.<br>Per ulteriori informazioni, visita la <a class=\"js-privacyLink\">privacy policy</a> e la <a class=\"js-policyLink\">cookie policy</a>.</p>\n\t\t\t<div class=\"box-selezionati\">\n\t\t\t\t<div class=\"selezionati-left\">\n\t\t\t\t\t<ul class=\"js-cookieBarList\"/>\n\t\t\t\t\t<div class=\"selezionati-bottoni\">\n\t\t\t\t\t\t<div class=\"js-cookieBarChecks\"/>\n\t\t\t\t\t\t<a class=\"button button-small rifiuta js-cookieBarDeclineAll\">Rifiuta tutti</a>\n\t\t\t\t\t\t<a class=\"js-cookieBarSave button button-small\">Conferma</a>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<span class=\"js-cookieBarSelected\"/>/<span class=\"js-cookieBarSelectable\"/>\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"selezionati-right\">\n\t\t\t\t\t<table id=\"tableCookie\" class=\"js-cookieBarExplain\">\n\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t<th/>\n\t\t\t\t\t\t\t<th>Nome / A cosa serve</th>\n\t\t\t\t\t\t\t<th>Scadenza</th>\n\t\t\t\t\t\t\t<th>Proprietario</th>\n\t\t\t\t\t\t\t<th>Dati inviati in</th>\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t</table>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>')

我期待看到正确的 UI 出现，但我又一次得到了错误的结果。所以我从 chrome 控制台执行那两条 javascript 行，将 html 添加到主体中。附加的 HTML 与我要求附加的不同，我在生产中看到的问题被转载：

<div class="js-cookieBar cookieLaw" id="cookie_bar_main_body">
<div class="js-cookieBarDescription cookiebar">
    <div class="cookie-panel">
        <div class="left">
            <span class="heading">Questo sito <br>utilizza cookie</span>
            <p>Per garantirti la migliore esperienza sul nostro sito in termini di funzionalità, accessibilità, usabilità e prestazioni nonché per ricordare le tue preferenze, ti invitiamo ad installare i cookie opzionali cliccando sul pulsante "Accetta tutti". Se desideri invece gestire le singole opzioni, clicca sul tasto "Impostazioni"</p>
        </div>
        <div class="right">
            <a class="js-cookieBarInfoButton link">Impostazioni <i class="arrow down"></i></a><i class="arrow down">
            <a class="js-cookieBarAcceptAll button">Accetta tutti</a>
        </i></div><i class="arrow down">
    </i></div><i class="arrow down">
</i></div><i class="arrow down">
<div class="js-cookieBarDetail cookiebar">
    <div class="cookie-panel selezionati">
        <p>Vogliamo essere trasparenti sui dati che noi e i nostri partner raccogliamo e sul loro utilizzo, in modo che tu possa averne un controllo ottimale.<br>Per ulteriori informazioni, visita la <a class="js-privacyLink">privacy policy</a> e la <a class="js-policyLink">cookie policy</a>.</p>
        <div class="box-selezionati">
            <div class="selezionati-left">
                <ul class="js-cookieBarList">
                <div class="selezionati-bottoni">
                    <div class="js-cookieBarChecks">
                    <a class="button button-small rifiuta js-cookieBarDeclineAll">Rifiuta tutti</a>
                    <a class="js-cookieBarSave button button-small">Conferma</a>
                    <p>
                        <span class="js-cookieBarSelected">/<span class="js-cookieBarSelectable">
                    </span></span></p>
                </div>
            </div>
            <div class="selezionati-right">
                <table id="tableCookie" class="js-cookieBarExplain">
                    <tbody><tr>
                        <th>
                        </th><th>Nome / A cosa serve</th>
                        <th>Scadenza</th>
                        <th>Proprietario</th>
                        <th>Dati inviati in</th>
                    </tr>
                </tbody></table>
            </div>
        </ul></div>
    </div>
</div>

这里是差异：

好像我的 escaping 有什么东西坏了，或者有什么东西拦截了附加指令并改变了内容（很奇怪，即使我运行来自的指令也发生了chrome 逐步调试控制台，因此不应在追加之后触发任何指令）。有人可以向我解释是什么导致了这种奇怪的行为吗？

Answer 1

因为您的 html 无效，span 或 i 标签的成对结束标签在哪里？

无效：

<a class="js-cookieBarInfoButton link">Impostazioni <i class="arrow down"/></a>

有效：

<a class="js-cookieBarInfoButton link">Impostazioni <i class="arrow down"></i></a>

你的html完全坏了，你可以在验证器中检查你的html，例如here

jQuery 追加插入一个意外的值

jQuery append insert an unexpected value

wordpress

jquery

append