在AngularJS中改变DOM元素的位置

Change the location of a DOM element in AngularJS

本文关键字：元素 位置 DOM 改变 AngularJS      更新时间：2023-09-26

我目前有一个类似于旋转木马的角指令。为了减少dom元素计数，我从dom中删除元素并重新插入它们。我目前正在使用angular.element来选择，删除和插入新项目，如下所示:

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

基本上这段代码找到oldElement并删除它，并创建newElement并将其附加到父容器元素。基本上，我想知道是否有可能移动 oldElement到一个新的位置，而不是删除和创建一个全新的元素?

这就是append (Node.prototype.appendChild)的工作原理。如果元素已经在DOM树中，它将元素移动到新的位置;如果元素还没有在DOM树中，它将创建新的元素并插入到DOM中。

在你的例子中:

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

或者更确切地说，因为您不需要jQuery/jqLite)来实现这样一个简单的DOM技巧:

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