利用JavaScript/jQuery进行HTML元素包装的正确姿势

简而言之，DOM中没有“起始标签”或“结束标签”的概念，只有完整的元素对象。因此，试图通过字符串拼接来模拟HTML标签的开闭是无效的。

正确的元素包装方法

要正确地将一组现有元素包装到一个新的父容器中，我们应该遵循DOM操作的原则：创建完整的元素，然后移动或包裹现有元素。以下介绍两种主要方法：

立即学习“Java免费学习笔记（深入）”；

方法一：创建新容器并移动现有元素

这种方法的核心思想是先创建一个新的父容器元素，然后将目标子元素逐一（或批量）移动到这个新容器中。

Skybox AI

一键将涂鸦转为360°无缝环境贴图的AI神器

下载

jQuery(document).ready(function($) {
    const $subMenu = $('.sub-menu');

    // 假设我们要将前3个
元素包装到第一个div中
    const $firstColDiv = $('
');

    // 获取前3个
元素
    const $firstThreeLis = $subMenu.children('li').slice(0, 3);

    // 将这些
元素追加到新的div中
    $firstColDiv.append($firstThreeLis);

    // 将新的div插入到原ul中的正确位置（在第一个li之前）
    $subMenu.prepend($firstColDiv);

    // 假设我们要将剩余的2个
元素包装到第二个div中
    const $secondColDiv = $('
');

    // 获取剩余的2个
元素 (原始的第4和第5个)
    const $lastTwoLis = $subMenu.children('li').slice(1, 3); // 注意：因为第一个div已经插入，ul的直接li子元素索引发生了变化
                                                          // 更稳健的做法是再次查找或使用原始集合的剩余部分

    // 更稳健的获取剩余元素方式：在第一次操作前获取所有li，然后切片
    const $allOriginalLis = $subMenu.children('li');
    const $remainingLis = $allOriginalLis.slice(3, 5); // 原始的第4和第5个

    $secondColDiv.append($remainingLis);

    // 将第二个div插入到原ul中的正确位置（在第一个div之后）
    // 由于第一个div已经插入，且其内部包含了前三个li，
    // 现在的ul直接子元素是第一个div和剩余的两个li
    // 我们可以将其插入到ul的末尾，或者在第一个div之后
    $subMenu.append($secondColDiv); 

    // 最终的DOM结构会变成：
    // 

    //   
...前3个li...
    //   
...后2个li...
    // 
});

示例HTML结构（操作前）：

   
Treatment Trials
   
Alzheimer’s
   
Asthma
   
COVID-19 Treatment
   
COPD

示例HTML结构（操作后，期望结果）：

   

      
Treatment Trials
      
Alzheimer’s
      
Asthma
   
   

      
COVID-19 Treatment
      
COPD
   

方法二：使用 wrapAll() 方法（推荐）

jQuery提供了一个更简洁、更符合语义的方法 wrapAll()，它可以将所有匹配的元素用一个单独的HTML结构包裹起来。这对于将一组兄弟元素统一放入一个新父容器的场景非常适用。

jQuery(document).ready(function($) {
    const $subMenu = $('.sub-menu');

    // 获取所有直接的
子元素
    const $allLis = $subMenu.children('li');

    // 将前3个
元素包装到第一个div中
    $allLis.slice(0, 3).wrapAll('
');

    // 将剩余的2个
元素（即原始的第4和第5个）包装到第二个div中
    // 注意：wrapAll会修改DOM，但它会将被包裹的元素从其原始位置移除，
    // 然后将新的包裹元素插入到第一个被包裹元素的原位置。
    // 因此，直接对原始集合的剩余部分进行切片是安全的。
    $allLis.slice(3, 5).wrapAll('
');
});

这种方法更加直观和高效，因为它一次性完成了元素的选取和包装，减少了手动插入和移动的步骤。

注意事项

1. DOM操作性能： 频繁或大量的DOM操作可能会影响页面性能。wrapAll() 通常比多次 append() 或 prepend() 更高效，因为它批量处理元素。
2. 选择器精确性： 确保你的选择器（如 $('.sub-menu').children('li') 或 slice(startIndex, endIndex)）精确地定位到你想要操作的元素。不精确的选择器可能导致意外的DOM结构改变。
3. DOM状态变化： 当你执行DOM操作（如 wrapAll()）后，DOM的结构会立即改变。如果你的后续操作依赖于旧的DOM结构或索引，需要重新评估或重新选取元素。在上述 wrapAll 示例中，我们先获取了所有原始 li 元素的集合 $allLis，然后对其进行 slice 操作，这样即使 wrapAll 改变了DOM，我们仍然基于原始的、未被修改的集合进行切片，确保了操作的正确性。
4. CSS与JS配合： 对于列布局，如果可能，优先考虑使用CSS Flexbox或Grid布局。JavaScript/jQuery DOM操作应作为在无法直接编辑HTML或CSS时的解决方案。

总结

在JavaScript或jQuery中进行DOM元素包装时，切勿尝试通过插入不完整的HTML标签字符串来实现。这违反了DOM操作的本质，即操作完整的元素对象。正确的做法是创建完整的父容器元素，然后利用 append()、appendTo() 或更便捷的 wrapAll() 等方法将目标子元素移动或包裹到新容器中。理解DOM的运作机制是进行高效且无错前端开发的关键。