Render javascript inside DOM element in SPFX extension

Question

I have a JS script which i would like to render in DOM element, where when page loads the modal dialog popup will appear.

I am not sure on how to achieve this.

<link rel="stylesheet" href="https://www.jacklmoore.com/colorbox/example1/colorbox.css" />
 
<style>
   #cboxClose{top:0;}
</style>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script>
 
<script>
 

if(sessionStorage.getItem('showAlert') != "false"){
        $(document).ready(function(){
$.colorbox({html:"<h1>  Site has been moved!   </h1><br/><br/>Hello, This site has been moved to a new location!. Checkout:<br/><br/><b><a href='https://crescent.sharepoint.com/sites/purchaseportal'>New Purchase Portal</a></b>",innerWidth:400, innerHeight:250,reposition:true,opacity:0.8});
});
        sessionStorage.setItem('showAlert', "false");
    }
 
</script>