使用jQuery根据窗口宽度增删DOM元素时append失效如何解决

数据老陈

2026-9-28

问题核心

你代码的问题出在元素被detach()移出DOM后，后续resize事件中用选择器无法再获取到这部分元素的引用，所以append操作没有生效。

修正方案

把三个元素的引用提前在resize事件外缓存，初始页面加载时元素还在DOM中，此时获取的引用会一直保留，即使元素被detach也不会丢失，后续可以直接用该引用执行append操作。

修正后的代码如下：

// 提前缓存元素引用，不要在resize回调里每次查询DOM
var three = $('#three');
var four = $('#four');
var five = $('#five');
var wrapper = $('.grid-wrapper');

$(window).on("resize", function () {
  var winWidth = $(window).width();
  if(winWidth < 769) {
    five.detach();
    four.detach();
    wrapper.append(three);
  }
  else if(winWidth > 2018) {
    three.detach();
    four.detach();
    wrapper.append(five);
  }
  else {
    three.detach();
    five.detach();
    wrapper.append(four);
  }
}).resize();