CODEWITHSUNDEEP
javascriptjqueryhtml
Zain
Zain

Reputation: 662

JS Error on Replacing Div Class Content

I am trying to replace html content within a class. It works when I put something simple, such as <p>0</p>.

But when I put the following:

$('.festi-cart-menu-item').html('<a id="festi-cart"    class="
        festi-cart
        festi-cart-customize  
        festi-cart-menu  
        festi-cart-click        woocart-show    "
    href="https://example.com/cart/"
>
    <div style=" line-height: 20px !important; " class="festi-cart-content">

        <img class="festi-cart-icon" width="20" height="20"  align="absmiddle" src="//example.com/wp-content/plugins/woocommerce-woocartpro/static/images/icons/user/custom_icon.png?1524043934" /><img style="display: none;" class="festi-cart-icon festi-on-hover" width="20" height="20"  align="absmiddle" src="//example.com/wp-content/plugins/woocommerce-woocartpro/static/images/icons/user/on_hover/custom_icon.png?1524043934" />



        <span
            class="festi-cart-position budgeCounter position-right">
            <p>
                0            </p>
        </span>

    <span class="festi-cart-text-before-total">
                    </span>
        <span class="festi-cart-text-after-total">
                    </span>


        <span class="festi-cart-dropdown-arrow"><img src="https://example.com/wp-content/uploads/2018/04/path-2.png" alt="dropdown"></span>
</div>
</a> ');

It's giving an error.

Can you help point what's wrong?

Upvotes: 0

Views: 47

Answers (2)

David Traparic
David Traparic

Reputation: 11

You have to specify your string variable is multiline. This is possible since ES6 with 

let string = `bla
bla
bla`;

Without ES6, something you could do would be

var string = '<html>'+
                  '<body>'+
                      '<input>'+
                  '</body>'+
             '</html>';

Upvotes: 1

Kacper Cieluch
Kacper Cieluch

Reputation: 447

Your problem comes from misunderstanding how "" and '' works in this case. These are mainly used for creating strings in single line and for multiple lines you should use double back-tick ``

If you want to make this work and code it the right way you can declare another variable e.g. var template and compose your template with ES6 syntax ``.

In your case it would look like this:

var template = `<a>...</a> ` //just put your template here

$('.festi-cart-menu-item').html(template);

Upvotes: 0

Related Questions