如何使用jQuery为目标HTML元素添加外层嵌套HTML元素

嗨，我来帮你搞定这个DOM结构调整的需求！你可以用jQuery的包裹方法轻松实现这个效果，下面是两种可行的方案：

方案一：分步包裹（更清晰直观） #

这种方式一步一步构建嵌套结构，适合需要理解每一步操作的场景：

// 先选中目标checkbox元素
const $cgvCheckbox = $('#cgv');

// 第一步：给input套上<span>标签
$cgvCheckbox.wrap('<span></span>');
// 第二步：把包含span的input再套上指定的div容器
$cgvCheckbox.parent().wrap('<div class="checker" id="uniform-cgv"></div>');

方案二：一步式嵌套包裹（更简洁） #

如果追求代码简洁，直接用一次wrap()就能完成多层嵌套，jQuery会自动把目标元素放到最内层容器里：

$('#cgv').wrap('<div class="checker" id="uniform-cgv"><span></span></div>');

额外提示 #

如果页面中存在多个相似结构（虽然id="cgv"应该是唯一的，但保险起见），可以通过父元素精准定位目标input，避免误操作：

$('.checkbox #cgv').wrap('<div class="checker" id="uniform-cgv"><span></span></div>');

执行完上述任意一段代码后，你的DOM结构就会完全变成你想要的样子：

Some text.

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