如何使用内容元素将自定义 html 标签添加到 swal答案

【问题标题】：How to add custom html tags to swal using content element如何使用内容元素将自定义 html 标签添加到 swal
【发布时间】：2025-12-18 13:55:02
【问题描述】：

我想在 swal bold 和自定义 text color 中制作文本，由于不再支持 html:true，我尝试设置 <span> 并将自定义 style 设置为 html标记，但它不起作用，我搜索了一个解决方案，但没有得到任何答案。

守则

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",
    },
    },

})

我尝试了什么

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

但也不工作。

【问题讨论】：

标签： html css alert sweetalert sweetalert2

【解决方案1】：

我终于找到了一种使用createElement() 方法的方法，该方法接受一个html标签的参数，

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

【讨论】：