如何实现网页区块在桌面与移动端的不同位置展示？

先分析你之前代码的问题 #

1. 第一个尝试的代码存在语法错误：$('div.mobile-remove').detach()).appendTo(...)里多了一个闭合括号，导致代码无法正常执行。
2. 第二个clone方案如果失败，大概率是因为默认clone()不复制元素绑定的事件/数据，或者目标容器mobile-add未被正确匹配。

推荐的正确实现代码 #

基础版（仅页面加载时判断） #

jQuery(document).ready(function($) {
  // 确保移动端检测函数可用
  if (window.mobileCheck) {
    const $moveElement = $('div.mobile-remove');
    const $targetContainer = $('div.mobile-add');

    // 先确认两个元素都存在，避免无意义操作
    if (window.mobileCheck() && $moveElement.length > 0 && $targetContainer.length > 0) {
      // 使用detach()保留元素的事件和数据，再移动到目标容器
      $moveElement.detach().appendTo($targetContainer);
    }
  }
});

进阶版（支持窗口大小动态切换） #

如果需要支持用户拖动窗口切换设备视图时自动调整位置，可以添加窗口resize监听：

function adjustElementPosition() {
  const $moveElement = $('div.mobile-remove');
  const $mobileContainer = $('div.mobile-add');
  // 假设桌面端的原始容器有类名desktop-container，请根据实际情况修改
  const $desktopContainer = $('div.desktop-container');

  if (!window.mobileCheck) return;

  if (window.mobileCheck()) {
    // 移动端：确保元素在mobile-add容器中
    if ($moveElement.length && $mobileContainer.length && !$moveElement.parent().is($mobileContainer)) {
      $moveElement.detach().appendTo($mobileContainer);
    }
  } else {
    // 桌面端：将元素移回原始容器
    if ($moveElement.length && $desktopContainer.length && !$moveElement.parent().is($desktopContainer)) {
      $moveElement.detach().appendTo($desktopContainer);
    }
  }
}

jQuery(document).ready(function($) {
  // 页面加载时执行一次
  adjustElementPosition();
  // 监听窗口大小变化，实时调整
  $(window).on('resize', adjustElementPosition);
});

关键注意事项 #

• DOM加载时机：所有DOM操作必须放在document.ready回调内，确保元素已经渲染完成。
• 元素存在性检查：先判断$moveElement.length和目标容器的长度，避免选择器未匹配到元素导致报错。
• 保留元素状态：使用detach()替代remove()，可以保留元素绑定的事件、数据属性等，移动后元素的交互行为不受影响。

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