如何用jQuery创建form-group div并包裹input-wrapper元素

你的代码存在两个核心逻辑错误，完全搞反了元素的嵌套方向：

• $(".input-wrapper").append('<div class="form-group"></div>') 这行的执行效果是把.form-group作为子元素插入到每个.input-wrapper的内部末尾，和你需要的「把.input-wrapper放到.form-group内部」的需求完全相反。
• 第二行$(".form-group").appendTo(".input-wrapper")属于重复错误操作：此时第一行已经把.form-group插到了.input-wrapper内部，这行再执行追加只会造成DOM结构错乱，根本无法实现外层包裹的效果。

jQuery 提供了专门的wrap()方法来实现「给每个匹配元素外层包裹指定父元素」的需求，代码非常简洁，完全不需要手动做多次append操作：

function create_structure(){
   // 为每个.input-wrapper外层包裹一个.form-group容器
   $(".input-wrapper").wrap('<div class="form-group"></div>');
};
window.setTimeout(create_structure, 2000);

执行上述代码后，得到的DOM结构和你预期的完全一致。

如果你不想用封装好的wrap()方法，想手动实现完整逻辑，可以参考下面的写法，核心是遍历每个目标元素，新建父容器后把目标元素移入容器，再把容器放回目标元素原来的位置：

function create_structure(){
   $(".input-wrapper").each(function() {
       // 新建form-group容器
       const formGroup = $('<div class="form-group"></div>');
       // 将当前input-wrapper移入容器，再用容器替换掉原来的input-wrapper位置
       $(this).replaceWith(formGroup.append($(this)));
   });
};
window.setTimeout(create_structure, 2000);

注：jQuery中append()、appendTo()都是做「子元素追加」操作，如果要实现反向的包裹/父元素插入，要么用专门的wrap()/wrapAll()/wrapInner()方法，要么手动维护元素的插入位置，不要搞反嵌套关系。

内容的提问来源于stack exchange，提问作者Owais Ahmed