JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<body ng-controller="myCtrl">

  <button ng-click="addScriptTags()">Add Script Tags</button>
  <div id="script-output"></div> <!-- This div will contain the script tags as text -->



</body>

JavaScript

var app = angular.module('myApp', []);

    app.controller('myCtrl', function($scope, $compile, $element) {
      $scope.scriptUrls = [
        'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/js/bootstrap.min.js'
      ];

      $scope.addScriptTags = function() {
        var scriptOutputDiv = angular.element(document.getElementById('script-output'));
        
        // Clear any existing script tags or text in the output div
        scriptOutputDiv.empty();

        $scope.scriptUrls.forEach(function(url) {
          // Create the script tag
          var scriptTag = angular.element('<script></script>');
          scriptTag.attr('type', 'text/javascript');
          scriptTag.attr('src', url);

          // Append the script tag to the body
          $element.append(scriptTag);

          // Append the script tag's HTML as text to the #script-output div
          var scriptText = angular.element('<pre></pre>').text('<script src="' + url + '"></script>\n');
          scriptOutputDiv.append(scriptText);
        });

        // Recompile the element to make AngularJS aware of the new content
        $compile(scriptOutputDiv.contents())($scope);
      };
    });