使用jQuery在元素前后添加HTML 给按钮包裹多类名元素报错如何解决

报错原因 #

insertAdjacentHTML 是原生DOM节点的专属方法，通过jQuery()选择器获取到的是jQuery封装的类数组对象，没有内置该方法，直接调用就会触发未定义错误。此外你原代码中前后插入的都是完整闭合的div元素，无法实现包裹按钮的效果，只会在按钮前后各生成两个独立的div节点。

可行解决方案 #

方案1：转为原生DOM调用insertAdjacentHTML

如果需要使用该原生方法，先把jQuery对象转为原生DOM节点即可，注意插入的内容分别为开标签和闭合标签才能完成包裹：

// 取第一个匹配的按钮原生节点，存在多个按钮时可循环处理
const targetBtn = jQuery(".button--bubble")[0];
targetBtn.insertAdjacentHTML('beforebegin','<div class="class-1"><div class="class-2">');
targetBtn.insertAdjacentHTML('afterend','</div></div>');

方案2：使用jQuery内置wrap方法（更推荐）

jQuery自带的wrap()方法就是专门用于给目标元素嵌套父级容器的API，代码更简洁，也会自动处理多元素匹配的场景：

// 自动将所有.button--bubble按钮嵌套进两层自定义类的父元素内
jQuery(".button--bubble").wrap('<div class="class-1"><div class="class-2"></div></div>');

该方法会自动把目标按钮放入你传入的HTML结构的最内层节点中，完全符合你包裹多层自定义类元素的需求。

内容的提问来源于stack exchange，提问作者Emma Kitching