jQuery中使用.after()方法插入内容时显示为字符串而非HTML元素

我通过以下代码选中目标元素：

let btn = $("a[translate='server.ipmi.kvm.LAUNCH']")[0];

随后尝试用这段代码在元素后插入内容：

btn.after('<a class="btn btn-default" onclick="launchNewKvm()">New KVM</a>')

但插入的内容被识别为字符串而非预期的按钮；若将内容包装为jQuery元素，插入后显示为[object Object]，求解决思路。

问题原因&解决思路 #

核心问题 #

你通过[0]把jQuery对象转换成了原生DOM元素，而原生DOM的after()方法和jQuery的同名方法行为完全不同：

• 原生after()接收字符串时，会直接将其作为文本节点插入，不会解析HTML；
• 原生after()接收对象时，会调用对象的toString()方法，所以jQuery对象会显示成[object Object]。

可行方案 #

方案1：保留jQuery对象调用方法

直接使用jQuery的after()方法，它会自动解析HTML字符串并插入元素：

let btn = $("a[translate='server.ipmi.kvm.LAUNCH']");
btn.after('<a class="btn btn-default" onclick="launchNewKvm()">New KVM</a>');

方案2：用原生DOM的insertAdjacentHTML()方法

原生DOM提供的这个方法支持直接解析HTML字符串，指定插入位置为afterend即可实现需求：

let btn = $("a[translate='server.ipmi.kvm.LAUNCH']")[0];
btn.insertAdjacentHTML('afterend', '<a class="btn btn-default" onclick="launchNewKvm()">New KVM</a>');

方案3：插入jQuery对象时转成原生DOM元素

如果要插入预先创建的jQuery对象，先取出其中的原生DOM元素再传入原生after()：

let newKvmBtn = $('<a class="btn btn-default" onclick="launchNewKvm()">New KVM</a>');
let btn = $("a[translate='server.ipmi.kvm.LAUNCH']")[0];
btn.after(newKvmBtn[0]);

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