how to append div to left of parent in angularjs?

Question

i have this code in 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 append on left side of click. how i can do this?

Answer 1

I have try this and it will work for me

element.parent().prepend(childNode);

Answer 2

try this way

childNode.insertBefore(element.parent());

this way childNode will be inserted before (or at left if you like) of element's parent node, as per jQuery API