使用.after()插入a标签仅显示为纯文本无交互的问题如何解决

原生DOM的Element.after()方法传入字符串参数时，会默认将其作为纯文本节点插入DOM，不会解析为HTML标签，因此你传入的a标签代码只会显示为普通文本，不会生成可交互的链接元素，该方法本身是支持该场景的，只是用法不对。

这里提供两种可直接运行的实现方案：

方案1：使用insertAdjacentHTML插入HTML字符串 #

该方法支持直接解析HTML字符串并插入到指定位置，使用afterend参数即可将内容插入到目标元素的后方：

var address = document.URL;
var pane = document.getElementsByClassName("heading--large")[0];
pane.insertAdjacentHTML('afterend', `<a href="${address}">${address}</a>`);

方案2：手动创建DOM元素后插入 #

先创建a标签节点再传入after方法，这种方式可以避免HTML注入风险，若URL存在用户可控内容时更推荐使用：

var address = document.URL;
var pane = document.getElementsByClassName("heading--large")[0];
const linkEle = document.createElement('a');
linkEle.href = address;
linkEle.textContent = address;
pane.after(linkEle);

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