将指定Div包裹到新Div中：牛仔裤尺码分组实现技术问询

嘿，我来帮你搞定这个牛仔裤尺码分组的需求！看起来你已经在CodePen上试了不少方法，我给你一个清晰的原生JavaScript解决方案，应该能直接解决你的问题。

核心逻辑就是遍历所有尺码项，根据每个项里span文本的最后一个字符（S/R/L），把它们分别移动到对应的分组容器中：

• 结尾为S的项 → 放入.small__stuff容器（对应小码）
• 结尾为R的项 → 放入.reg__stuff容器（对应常规码）
• 结尾为L的项 → 放入.large__stuff容器（对应长码）

// 等待DOM完全加载后执行
document.addEventListener('DOMContentLoaded', () => {
  // 获取三个目标分组容器
  const smallContainer = document.querySelector('.small__stuff');
  const regContainer = document.querySelector('.reg__stuff');
  const largeContainer = document.querySelector('.large__stuff');

  // 获取所有需要分组的尺码项
  const sizeItems = document.querySelectorAll('.content__item');

  // 遍历每个尺码项，进行分组
  sizeItems.forEach(item => {
    // 取出span里的尺码文本，并去除首尾空格
    const sizeText = item.querySelector('span').textContent.trim();
    // 获取文本的最后一个字符，用来判断尺码类型
    const sizeType = sizeText.slice(-1);

    // 根据尺码类型将项移动到对应容器
    switch(sizeType) {
      case 'S':
        smallContainer.appendChild(item);
        break;
      case 'R':
        regContainer.appendChild(item);
        break;
      case 'L':
        largeContainer.appendChild(item);
        break;
      // 处理不符合规则的项（可选）
      default:
        console.log(`跳过不识别的尺码: ${sizeText}`);
    }
  });
});

1. DOM加载监听：用DOMContentLoaded确保代码在页面所有元素加载完成后再执行，避免找不到DOM元素的问题。
2. 容器获取：通过querySelector拿到三个分组容器的DOM节点。
3. 尺码项遍历：用querySelectorAll获取所有.content__item，然后逐个处理。
4. 尺码类型判断：通过slice(-1)快速获取文本最后一个字符，判断属于哪类尺码。
5. 元素移动：appendChild会自动把元素从原来的位置移除并添加到目标容器，不需要额外删除操作。

如果你不想移动原元素，而是想要复制一份到分组容器，可以把appendChild(item)改成appendChild(item.cloneNode(true))，这样原元素会保留在原来的位置，分组容器里是副本。

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