Search code examples
javascriptsweetalert

How to add an anchor <a> tag / html to a Swal call

I am trying to add an anchor tag to my swal tag (I am using Sweetalert with cdn). Is there any way to do this specifically with jQuery (not Angular/React)?

I have tried using a variable with the value of the link as below:

swal({
text: "foo",
content: "link" + (backtick)<a href="link">Link</a>(backtick)
});

But why this did not work?

Thanks.

Solution

  • As @Louys pointed out in the comment above, use SweetAlert2 (the latest)

    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    Then you can utilise the html field, like so:

    Swal.fire({
  title: '<strong>HTML <u>example</u></strong>',
  icon: 'info',
  html:
    'You can use <b>bold text</b>, ' +
    '<a href="//sweetalert2.github.io">links</a> ' +
    'and other HTML tags'
})

    Using a 'template literal' - backticks (`) - you can insert variables and add a link like so:

    var my_link = 'http://google.com';
Swal.fire({
  title: '<strong>HTML <u>example</u></strong>',
  icon: 'info',
  html: `<a href="${my_link}">Click here!</a>`
})