How to insert icon in button using JavaScript dynamically

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> <button id="myButton" onclick="addIcon()"> Click Me</button> <script> function addIcon(){ btn = document.getElementById('myButton'); btn.innerHTML = '<i class = "fa fa-spinner fa-spin"></i> Please wait...'; setTimeout(function(){ alert("Completed!"); btn.innerHTML = 'Click Me'; }, 3000); } </script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

<button id="myButton" onclick="addIcon()"> Click Me</button>

 <script> 

function addIcon(){

 btn = document.getElementById('myButton');

 btn.innerHTML = '<i class = "fa fa-spinner fa-spin"></i> Please wait...';

 setTimeout(function(){ 

   alert("Completed!"); 

   btn.innerHTML = 'Click Me';

 }, 3000); 

}

</script>