insertAdjacentHTML传DOM元素报错，求beforebegin位置等效插入方案

你遇到的类型报错原因是insertAdjacentHTML方法的第二个入参要求传入HTML字符串，而你传入的deleteElement是HTMLElement实例，类型不匹配导致报错。

等效实现方案 #

方案1：直接使用insertAdjacentElement（最推荐） #

你需要的效果本身就是insertAdjacentElement的标准能力，直接替换调用的方法名即可，插入位置参数不需要改动：

if (controlIndicator) {
  controlIndicator.insertAdjacentElement('beforebegin', deleteElement);
}

该方法的beforebegin位置规则完全符合你的预期：将元素插入到controlIndicator节点的前方，二者为平级的兄弟节点关系。

方案2：使用insertBefore兼容实现 #

如果存在特殊场景无法使用insertAdjacentElement，可以通过父节点的insertBefore方法实现完全一致的效果：

if (controlIndicator && controlIndicator.parentNode) {
  controlIndicator.parentNode.insertBefore(deleteElement, controlIndicator);
}

补充说明 #

你之前使用的prepend方法是将元素插入到父元素的第一个子节点位置，属于父元素的子级节点，和beforebegin要求的平级插入逻辑差异很大，确实无法替代使用。

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