时间戳

首页 > 解决方案 > 将 div 直接移动到另一个带有普通/原生 js 的 div 之后？

javascript - 将 div 直接移动到另一个带有普通/原生 js 的 div 之后？

问题描述

许多人可能会问为什么想看看它是否真的需要。虽然不受欢迎，但由于与答案无关，因此不会详细说明此特定用例。它可以通过一行 JQuery 轻松完成，但是需要纯 js 并且理想情况下尽可能短而直接。请参阅 SO 上的类似请求，但许多请求用于在 div 内移动或具有稍微复杂的要求。

创建了一个按需要工作的基本示例：

var contentDiv = document.querySelector('.c');
var anchorDiv = document.querySelector('.b');
contentDiv.after(anchorDiv);
<div class="container">
  <div class="a">
    A
  </div>
  <div class="b">
    B
  </div>
  <div class="c">
    C
  </div>
</div>

但是在实际代码上执行此操作时会出现错误：

TypeError：null 不是对象（评估 'contentDiv.after'）

虽然将脚本放在页面顶部可能会导致这种情况，但将其放在底部，那么还有其他可能导致这种情况的原因吗？

如果特定的类名有问题，实际使用的代码如下：

<script>
  var contentDiv = document.querySelector('.product-description');
  var anchorDiv = document.querySelector('.product-details__container');
  contentDiv.after(anchorDiv);
</script>

还想也许我需要准备一份文件。也是这样：

<script>
  document.addEventListener('DOMContentLoaded', function () {
  var contentDiv = document.querySelector('.product-description');
  var anchorDiv = document.querySelector('.product-details__container');
  contentDiv.after(anchorDiv);
}, false);
</script>

但同样的错误。有任何想法吗？

标签： javascript

解决方案

如果您对某些页面进行 AJAX，那么在代码运行时您可能没有该类的元素

试试这个看看它最终是否有效，然后你就知道为什么了

const swap = () => {
  const contentDiv = document.querySelector('.product-description');
  const anchorDiv = document.querySelector('.product-details__container');
  if (contentDiv && anchorDiv) contentDiv.after(anchorDiv);
  else {
    console.log({contentDiv},{anchorDiv})
    setTimeout(swap,1000)
  }
};
window.addEventListener('load', swap);

推荐阅读