Content inserting as a string-CodePudding

I'm trying to append this "Free Delivery" message on my site but its getting injected as a string rather than an html

var isOnPDP = window.location.href.match("https://l1556639c1dev-store.occa.ocs.oraclecloud.com/occ-live/park-up/105243");
var freeDeliveryMessage = "<div class='awaFreeDelContainer'><span class='check'>&check;</span> Your order qualifies for FREE delivery</div>";
if(isOnPDP){
    if($(".MiniCart__SubTotalAmount").textContent.substr(1)>= 250){
    //  if($(".awaFreeDelContainer").length == 0){
        $(".MiniCartItems").append(freeDeliveryMessage);
    }
}
else{
    $(".awaFreeDelContainer").remove();
}

I was expecting the delievry message to be created as a normal HTML

CodePudding user response：

The issue you're experiencing is because you are appending the freeDeliveryMessage variable as a string, rather than as an HTML element.

You can use the jQuery .append() method to append the message to the .MiniCartItems element, you can use the jQuery $(htmlString) function to convert the string into a jQuery object and then append it.

$(".MiniCartItems").append($(freeDeliveryMessage));

Alternatively, you can use the .innerHTML property to add the message as html

$(".MiniCartItems").append(freeDeliveryMessage);

You can also use the .insertAdjacentHTML() method to insert the message as HTML

$(".MiniCartItems").insertAdjacentHTML("beforeend", freeDeliveryMessage);

Another way to do it is by creating a new element and then appending it

let newEl = document.createElement("div"); newEl.innerHTML = freeDeliveryMessage; $(".MiniCartItems").append(newEl);