How to add custom html tags to swal using content element

Question

I want to make the text in the swal bold and with a custom text color and since html:true is no more supported, I tried to set a <span> and set my custom style to the html tag, but it is not working, and I searched for a solution but I got no answers.

The Code

swal({

    title: "Summary",
    content: '<span>"counter " + this.counterType_1 + ": "+ this.counter_1_from.value.counter_1 +" - Sold Liters: " + liter_sold_1</span>',

    className: "success",
    closeOnClickOutside: false,

    closeOnEsc: false,
    dangerMode: true,
    buttons: {
    submit: {
        text: "Submit",
        value: "submit",
    },
    noAction: {
        text:"Cancel",
        value: "Cancel",
    },
    },

})

What I tried

var _html= '<span>"counter " + this.counterType_1 + ": "+ this.counter_1_from.value.counter_1 +" - Sold Liters: " + liter_sold_1</span>',
content: _html,

but also not working.

Answer 1

I finally find a way by using createElement() method which takes param an html tag,

var wrapper = document.createElement('h1');
wrapper.innerHTML = 'this is bold text';
swal({
    content:wrapper,
    title: "Summary",
    className: "success",
    closeOnClickOutside: false,
    closeOnEsc: false,
    dangerMode: true,
})