OneBite.Dev - Coding blog in a bite size

How to add HTML content inside sweetalert box

Here is how you can add html content or html tag inside your sweetalert box

Before you do this, make sure you use sweetalert version 2, not the first one. If you’re still using the 1st version, i know you’ll back up a bit. Since i’m using sweetalert boxes all over my webiste, i feel really lazy too to upgrade to 2nd version, but it’s actually very easy, in most cases just use instead just swal.

Okay.. now let’s see how you can add html content inside your sweetalert box. Here is an example if i want to make 2 different inputs

var htmlContent = "<input placeholder='text' class='swal2-input' id='swal-input1'>" +
                     "<input placeholder='link' class='swal2-input' id='swal-input2'>"{
    title: "Put your Link",
    html: htmlContent,
    focusConfirm: false,
    preConfirm: function(){
                textInput = $('#swal-input1').val()
                linkInput = $('#swal-input2').val()
                //do something

The htmlContent variable is to hold all the html elements you want to create, by separating this in it’s own variable, we can read and add things easier.

preConfirm attribute is very important, it’s the function that you want to run after people submit or do something with the box