How to add a div to the left of the parent in angularjs?

Question

I have this code in the controller:

demo.$inject = ['$scope'];

  demo.directive("boxCreator", function($compile){
      return{
          restrict: 'A',
          link: function(scope , element){
              element.bind("click", function(e) {

                  var childNode = $compile('<div ng-drop="true"> <span class="title">Drop area #2</span> <div ng-repeat="obj in droppedObjects2" ng-drag="true" ng-drag-data="obj" ng-drag-success="onDragSuccess2($data,$event)" ng-center-anchor="{{centerAnchor}}"> {{obj.name}}</div></div>')(scope)
                  element.parent().append(childNode);
              });
          }
      }
  });

and I want to add on the left side of the click. How can i do this?

Answer 1

I tried this and it will work for me

element.parent().prepend(childNode);

Answer 2

try this way

childNode.insertBefore(element.parent());

this way it childNodewill be inserted before (or to the left, if you want) element parentnode, according to the jQuery API