尽管将它放在 "Document Ready" 中，但为什么我在加载页面时会看到 jQuery 'append' 发生？

Question

我有围绕 div 移动的代码。它应该发生在用户的视野之外。但是每当我清除缓存并刷新页面进行测试时，我每次都会看到这些 div 在移动！视觉上超级讨厌...

我有 2 种方法，而且我都可以看到。

第一种方式：

    //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 () { 中？谢谢。

Answer 1

问题

$(document).ready() 将等待 DOM 在执行您的移动之前呈现，因此您会在它进行更改之前暂时看到旧位置。这是一个限制，因为您在渲染后使用 JavaScript 来操纵 DOM（并且您需要等到它被渲染之后，否则没有任何东西可以移动）。

解决方案

可能的解决方法是隐藏您要移动的元素，然后仅在移动完成后才显示。

您可以通过向要移动的元素添加 .hidden class 并在移动后删除 class 来实现。

var ref = document.querySelector('.foo'); // Element to move
var target = document.querySelector('.red') // Destination

moveElement(ref, target); // Move
ref.classList.remove('hide') // Unhide

function detatchElement(ref) {
  if (typeof ref === 'string') ref = document.querySelector(ref);
  return ref.parentElement.removeChild(ref);
}
    
function moveElement(ref, target) {
  if (typeof target === 'string') target = document.querySelector(target);
  target.appendChild(detatchElement(ref));
  return ref;
}

div {
  display: grid;
  place-items: center;
  height: 100px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.foo {
  color: white;
  font-size: 20px;
}

.hide {
  display: none;
}

<div class="red"></div>
<div class="blue"><span class="foo hide">I started in blue.</span></div>

尽管将它放在 "Document Ready" 中，但为什么我在加载页面时会看到 jQuery 'append' 发生？

Despite putting it in "Document Ready", why can I see jQuery 'append' happening when I load the page?

html

javascript

jquery

dom

document

问题

解决方案