SharePoint Online - Attach Modal Dialog to Button Div

I am trying to work out how to attach a modal dialog to a Button Div in SharePoint Online Script Editor Webpart.

I am trying to work out how to attach a modal dialog to a Button Div in SharePoint Online Script Editor Webpart.

Modal Code
Originally I had this code to open a Modal Dialog:

    <a class="xxx" style="cursor:pointer;" alt="DisplayForm" onclick="javascript:function tdql1(){SP.UI.ModalDialog.showModalDialog({url:'https://contoso.sharepoint.com/sites/mysite/Lists/Locations/AllItems.aspx', title:'Locations', dialogReturnValueCallback:function(dialogResult){SP.UI.ModalDialog.RefreshPage(dialogResult)}})}tdql1();">Open Locations list</a>

Button Code
This is the code I have for my button:

    <script>
    
    function loadScript() {
     var lala = document.querySelectorAll(".btgm_search")
    var node = document.createElement("Button");                 
    var textnode = document.createTextNode("List");         
    //Create an ID / Class
    //to bind an onclick function below this function
    
    node.appendChild(textnode);                             
    
    lala[0].appendChild(node)
    }
    
    window.onload = loadScript;
    </script>

Would be useful if someone could help me work out how to link the modal code to the button so that when I click the button it opens a SharePoint List in a modal dialog window.

Thanks.