如何通过 wordpress 中的最新 jquery 在引导模式弹出窗口中动态执行 hubspot 嵌入表单脚本？

Question

I have a bootstrap modal popup form in which I append Hubspot embed script based on the button that is clicked. The below code works perfectly before the latest jquery core update

jQuery(document).ready(function($){
   
    $('.ga-modal-popup .elementor-button,#footer-email').click(function(e){
        e.preventDefault();
        var formId = 'cc3c9892-0a53-488d-9236-ce41a01bd4aee';
        var portalId = '4079114';
        if($( this ).hasClass( "elementor-button" )){
          formId = $('.ga-modal-popup').data("form-id");
          //if portal id deosn't chnage no need to  be assigned here
          portalId = $('.ga-modal-popup').data("portal-id");
        }
      $('#footer-popup .modal-body').empty();
      $('#footer-popup .modal-body').append($('<script/>', {html: "hbspt.forms.create({portalId:'"+portalId+"',formId:'"+formId+"',css:'', cssRequired: ''});"}));
      $('#footer-popup').modal('show');
    });
});

In the latest version,the issue is with this line of code $('#footer-popup.modal-body').append($('<script/>', {html: "hbspt.forms.create({portalId:'"+portalId+"',formId:'"+formId+"',css:'', cssRequired: ''});"})); if i change the same line using 'eval' like this eval($("#footer-popup.modal-body").append("<script>hbspt.forms.create({portalId:'"+portalId+"',formId:'"+formId+"',css:'', cssRequired: ''});</script>").text()); it works but i don't want to use eval and also i don't want to install jquery migrate plugin and use legacy jquery.Injecting script via pure js isn't working either. Any insights about how to solve this issue?

Answer 1

var newScript = document.createElement("script");
      var inlineScript = document.createTextNode("hbspt.forms.create({portalId:'"+portalId+"',formId:'"+formId+"',css:'', cssRequired: ''});");
      newScript.appendChild(inlineScript); 
      var target  = document.querySelector("#footer-popup .modal-body");
      target.appendChild(newScript);

This pure javascript solved the issue