咨询：能否使用jQuery添加Div元素并实现指定DOM结构调整

当然可以轻松用jQuery实现这个结构调整！我直接给你实用的代码和解释：

需求回顾 #

你需要把<li>内的.2、.another、.3三个元素，统一包裹到一个新的<div class="new">里，放在.1的后面，最终得到目标结构。

实现代码 #

这是最简洁的解决方案，利用jQuery的wrapAll()方法——它专门用来把多个DOM元素包裹到一个父容器中，还能保持元素原有的顺序：

// 确保DOM加载完成后执行
$(function() {
  // 遍历所有符合结构的<li>（如果只处理单个，可给<li>加类/ID来精准定位）
  $('li').each(function() {
    // 在当前<li>中选中需要包裹的元素，用wrapAll包裹到新div里
    $(this).find('.2, .another, .3').wrapAll('<div class="new"></div>');
  });
});

代码解释 #

• $(function() { ... })：是$(document).ready()的简写，确保代码在页面所有DOM元素加载完成后再执行，避免找不到元素的问题。
• $('li').each(...)：遍历页面上的每个<li>元素（如果你的场景里只有一个目标<li>，可以改成$('li.your-target-class')来精准选择）。
• $(this).find('.2, .another, .3')：在当前<li>内部，选中需要被包裹的三个元素。
• wrapAll('<div class="new"></div>')：把选中的三个元素一次性包裹到新创建的<div class="new">中，完美匹配你的结构需求。

最终效果 #

执行代码后，你的DOM结构会变成：

<li>
  <a href="" class="1"></a>
  <div class="new">
    <a href="" class="2"></a>
    <div class="another"></div>
    <a href="" class="3"></a>
  </div>
</li>

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