使用insertBefore插入元素未生效，如何将.socialShare插入到.read-more-wrap前？

你的代码思路是对的，但可能因为几个容易忽略的细节导致没生效，咱们一步步排查修复：

1. 先确认所有目标元素都能被找到 #

如果 querySelector 找不到 .socialShare、.read-more-wrap 或者 .blog-detail（比如DOM还没加载完、选择器拼写错了），变量会变成 null，这时候调用 insertBefore 直接就报错了。所以先加个存在性检查：

if (width <= 450) {
  const blogDetail = document.querySelector('.blog-detail');
  const addThis = document.querySelector('.socialShare');
  const readMore = document.querySelector('.read-more-wrap');
  
  // 确保三个元素都存在才执行插入
  if (blogDetail && addThis && readMore) {
    blogDetail.insertBefore(addThis, readMore);
  }
}

2. 避免做无效的重复操作 #

如果 .socialShare 本来就已经在 .read-more-wrap 的前面，再调用 insertBefore 不会有任何变化，你可能会误以为代码没起作用。可以加个判断，只有当位置不对的时候才执行插入：

if (width <= 450) {
  const blogDetail = document.querySelector('.blog-detail');
  const addThis = document.querySelector('.socialShare');
  const readMore = document.querySelector('.read-more-wrap');
  
  if (blogDetail && addThis && readMore) {
    // 检查addThis的下一个兄弟是不是readMore，不是的话再移动
    if (addThis.nextElementSibling !== readMore) {
      blogDetail.insertBefore(addThis, readMore);
    }
  }
}

3. 确保代码在正确的时机运行 #

• 如果是页面加载时执行，一定要等DOM完全加载完成，不然元素还没生成，querySelector 找不到。可以把代码放在 DOMContentLoaded 事件里：

document.addEventListener('DOMContentLoaded', function() {
  // 把逻辑封装成函数，方便复用
  const adjustSocialSharePosition = () => {
    const width = window.innerWidth;
    if (width <= 450) {
      const blogDetail = document.querySelector('.blog-detail');
      const addThis = document.querySelector('.socialShare');
      const readMore = document.querySelector('.read-more-wrap');
      
      if (blogDetail && addThis && readMore && addThis.nextElementSibling !== readMore) {
        blogDetail.insertBefore(addThis, readMore);
      }
    }
  };
  
  // 页面刚加载时执行一次
  adjustSocialSharePosition();
  
  // 如果需要监听窗口大小变化（比如用户缩放窗口），加上resize事件
  window.addEventListener('resize', adjustSocialSharePosition);
});

• 如果你的内容是动态生成的（比如通过AJAX加载的博客详情），要确保这段代码在元素生成之后再执行。

4. 额外提醒：元素移动的特性 #

insertBefore 会把元素从原来的父容器中移除，然后插入到目标位置——这是正常的。如果你的场景需要保留原来的 .socialShare 元素，那得先克隆它：const addThisClone = addThis.cloneNode(true);，然后插入克隆出来的元素。

内容的提问来源于stack exchange，提问作者Sireini