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?

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?

• javascript
• html
• angularjs

• what you mean move to a new location? if you do append(oldElement) for some other element - it moved – Grundy Commented Jul 24, 2015 at 6:52
• You can hide the old element with ´ng-hide´ in DOM. – mggSoft Commented Jul 24, 2015 at 6:58
• @Grundy thanks for the reply, I'll try it out – Matthew Merryfull Commented Jul 24, 2015 at 7:02
• @mggSoft Thanks for the suggestion, however, I'm not interested in hiding elements in place. If for instance, the carousel has 200+ items, I'm not going to hide 195 rendered items – Matthew Merryfull Commented Jul 24, 2015 at 7:04
• Ok @MatthewMerryfull. You can use ng-if, which allows you remove or add the item to DOM. – mggSoft Commented Jul 24, 2015 at 7:09

1 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);
}