Javascript Sweet Alert and html link inside text

Question

i have the following SweetAlert Code..

<script type="text/javascript" charset="utf-8">
    $('.patient-details').click(function(e) {
        e.preventDefault();
        var name = $(this).attr('data-name');
        var gender = $(this).attr('data-gender');
        var age = $(this).attr('data-age');
        var country = $(this).attr('data-country');
        var state = $(this).attr('data-state');
        var address = $(this).attr('data-address');
        var report = $(this).attr('data-report');
        swal({
            title: name,
            text: "Gender: " + gender +"\n" + "Age: " + age +"\n" + "Country: " + country +"\n" + "State: " + state +"\n" + "Address: " + address +"\n" + "Report: " + report,
            confirmButtonColor: "#00B4B4",
            imageUrl: "images/avatar/user.png",
        });
    });
</script>

The var report is a link and i need the link displayed in the modal. I tried html: true etc. html is no longer used. Instead use the content object. as doc says:

https://sweetalert.js.org/docs/#content

https://sweetalert.js.org/guides/

But i as a newbie is unable to make sense out of it.

Requesting help on how to display the link in the modal and the link to be opened in new window.

Update: Since the solutions provided were not working i used another approach using html to resolve it. Need to remove text, else text will be default. Codepen link: https://codepen.io/pamela123/pen/GOJZgo

Answer 1

Found this answer here, all credits to Tristan Edwards

const el = document.createElement('div')
el.innerHTML = "Here's a <a href='http://google.com'>link</a>"

swal({
  title: "Hello!",
  content: el,
})