jQuery append insert an unexpected value

Question

I have a very strange problem executing jQuery("body").append() instruction on a specific WordPress instance (not on all WordPress sites that use this script), despsite what i "append" (even while debuggin with chrome console) the actual data appended differ.

In my scenario, i have developed a javascript file to hanlde a minimal cookiebar compliant with GDPR rules, that should be compatibile with wordpress. After you include that javascript file to the wordpress instance the content inside the script is executed, it will "scan" (a bit more complex of this, it involve a remote service and a rest api) the page and generate the cookiebar with all the cookie information, so that the user can accept only the desired cookies. Cookibar code is not too complex but is definly too long to post it here, consider only that at the end of all it's logic it performa that instruction :

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

Now starting from the premise that my cookiebar is broken, i removed all the cookiebar code and leave onyl that two lines of code

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

Where HARDCODED_HTML is a dummy example of cookiebar (here the unescaped version) :

<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>

Here the exact command with the escaped html payload :

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

I am expecting to see the right UI appear, but instead i once again get the wrong result. So i execute that two javascript line, from chrome console, whatching the html added to the body. The HTML appended differ from what i ask to append and the issue i see in production is reproduced :

<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>

Here the diffing :

Seems like my escaping has something broken, or that there is something that intercept the append instruction and change the content (very strange, it happened even when i run the instruction from chrome console debugging step by step, so no instruction should fire just after the append). Can someone explain to me what may casue that strange behaviour?

Answer 1

Because your html is not valid, where are the paired closing tags for the span or i tags?

Not valid:

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

Valid:

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

You have a completely broken html, you can check your html in the validator, for example here