insert before element in angular directive
<p>Here is my html code:</p>

<pre><code>&lt;div class="row"&gt;
  &lt;div ng-if="isLoadingApprovalUrl" class="col-xs-12"&gt;
    &lt;div class="text-center"&gt;&lt;span class="fa fa-spinner fa-pulse fa-5x fa-fw margin-bottom"&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;div ng-if="!isLoadingApprovalUrl" class="col-xs-12"&gt;
    &lt;div ng-if="isAppApproved" class="alert alert-success"&gt;{{'WORKSPACE_APPS.APPROVE_GOOGLE_APPS.SUCCESS' | translate}}&lt;/div&gt;
    &lt;div class="alert alert-danger" ng-show="errors.length &gt; 0"&gt;
      &lt;ul&gt;&lt;li ng-repeat="error in errors"&gt;{{error}}&lt;/li&gt;&lt;/ul&gt;
    &lt;/div&gt;

    &lt;iframe id="appApprovedId" ng-if="approvalUrl" class="approve-iframe" ng-class="{'app-approved': isAppApproved}" ng-src="{{trustedApprovalUrl}}" iframe-onload&gt;&lt;/iframe&gt;

    &lt;div ng-if="!isApprovalRequired" class="alert alert-info" translate="WORKSPACE_APPS.APPROVE_GOOGLE_APPS.ALREADY_APPROVED" translate-values="{appTitle: googleApp.title}"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>here is my directive</p>

<pre><code>.directive('iframeOnload', function() {
    return {
      restrict: 'A',
      scope: {
        isRequired: '='
      },
      link: function(scope, elem){
        var spinnerElement = angular.element(' &lt;div ng-if="isApprovalRequired" id="appApprovalSpinner" class="row text-center approve-spinner"&gt;&lt;i class="fa fa-spinner fa-pulse fa-5x fa-fw margin-bottom"&gt;&lt;/i&gt;&lt;/div&gt;');

       elem.parent().append(spinnerElement) ;

        angular.element('#appApprovalSpinner').addClass('ng-show');
        elem.on('load', function(){
          angular.element('#appApprovalSpinner').addClass('ng-hide');
        });
      }
    };
</code></pre>

<p>The spinnerElement is added after iframe tag but I want to add spinnerElement before iframe tag but couldn't make it works to have spinnerElement is added before iframe tag . Any help is greatly appreciated.</p>