Javascript 尽管把它放在；“文件准备就绪”；，为什么我可以看到jQuery'；追加'；当我加载页面时发生了什么？

我有在div中移动的代码。它应该发生在用户的视野之外。但是每当我清除缓存并刷新页面来测试它时，我每次都会看到这些div在移动！这在视觉上非常烦人

我有两种方法可以做到这一点，我都可以看到视觉效果

第一条路：

    //START MOVE
    [...document.querySelectorAll('#primary')].forEach(x => {
      moveElement(
        x.querySelector('.snax-voting-container-body'),
        x.querySelector('.object1')
        //x.querySelector('.snax-voting-container-body')
      );
    });

    /**
     * Moves an element by detaching it from its parent and appending it to
     * a target.
     * @param {HTMLElement|String} ref - Element to detach and move
     * @param {HTMLElement|String} target - Element where ref will be appended
     * @return Returns the element that was moved
     */
    function moveElement(ref, target) {
      if (typeof target === 'string') target = document.querySelector(target);
      target.appendChild(detatchElement(ref));
      return ref;
    }

    /**
     * Detaches an element from its parent.
     * @param {HTMLElement|String} ref - Element to detach from its parent
     * @return Returns the detached element
     */
    function detatchElement(ref) {
      if (typeof ref === 'string') ref = document.querySelector(ref);
      return ref.parentElement.removeChild(ref);
    }//end of MOVE

第二种方式：

    $('.object1').append(  $('.snax-voting-container-body') );

知道为什么会发生这种情况吗？为什么我可以看到这个过程，尽管它在

$（document）.ready（function（）{

）中，谢谢。

问题

$（document）.ready（）

将在执行移动之前等待DOM呈现，因此在它进行更改之前，您将立即看到旧位置。这是一个限制，因为您正在使用JavaScript在DOM呈现后对其进行操作（你需要等到它被渲染之后，否则就没有东西可以移动了）

解决方案 一个可能的解决办法是隐藏你要移动的元素，然后只在移动完成后才显示

可以通过向要移动的元素添加.hidden类，然后在移动后删除该类来实现这一点

var ref=document.querySelector（'.foo'）；//要移动的元素
var target=document.querySelector（'.red'）//目标
moveElement（参考，目标）；//移动
ref.classList.remove（'hide'）//取消隐藏
函数detatchElement（ref）{
如果（typeof ref==='string'）ref=document.querySelector（ref）；
返回ref.parentElement.removeChild（ref）；
}
功能元素（参考，目标）{
if（typeof target==='string'）target=document.querySelector（target）；
target.appendChild（detatchElement（ref））；
返回ref；
}

div{
显示：网格；
放置项目：中心；
高度：100px；
}
瑞德先生{
背景色：红色；
}
蓝先生{
背景颜色：蓝色；
}
傅先生{
颜色：白色；
字体大小：20px；
}
.隐藏{
显示：无；
}

我从蓝色开始。

非常感谢您提供完整的示例！这非常有用。