Change the location of a DOM element in AngularJS

Question

I currently have an angular directive which works similar to a carousel. In order to keep the dom element count down, I remove elements from the dom and re-insert them. I'm currently making use of the angular.element in order to select, delete and insert new items like so:

app.directive('myDirective', function(){
    return{
        link: function(scope, elem){
            var jqLite = angular.element;

            var parentElement = jqLite(elem[0].queryselector('.parent'));

            // Selection..
            var oldElement = jqLite(elem[0].queryselector('.oldItem'));
            var newElement = jqLite('<div class=".newItem">Content here</div>');

            oldElement.remove();

            parentElement.append(newElement);

        }
    }
});

Basically this code finds oldElement and removes it and creates newElement and appends it to the parent container element. Basically I want to know if its possible move oldElement to a new location rather than deleting and creating a whole new element?

Answer 1

This is exactly how append works (Node.prototype.appendChild). It moves element to new location if it's already in DOM tree, or creates new element and inserts to DOM if it's not there yet.

In your case:

app.directive('myDirective', function(){
    return{
        link: function(scope, elem) {
            var jqLite = angular.element;

            var parentElement = jqLite(elem[0].querySelector('.parent'));
            var oldElement = jqLite(elem[0].querySelector('.oldItem'));

            parentElement.append(oldElement);
        }
    }
});

or rather, because you don't need jQuery/jqLite) for such a simple DOM trick:

link: function(scope, elem){
    var parentElement = elem[0].querySelector('.parent');
    var oldElement = elem[0].querySelector('.oldItem');
    parentElement.appendChild(oldElement);
}