如何使用JavaScript在指定位置插入元素并保留事件监听器？

完全可以实现，不止appendChild，多个原生DOM方法都能在保留元素事件监听器的前提下，完成指定位置的插入操作。核心逻辑是：只要你操作的是DOM节点本身（而非通过HTML字符串重新渲染），绑定在节点上的事件监听器就会被保留。

针对你给出的示例结构：

<div id="parent">
    <div></div>
    <div id="insert_after_this"></div>
    <div></div>
</div>

下面是几种可行的实现方式：

1. 使用Element.after()方法（最直观） #

这是ES6新增的方法，直接在目标元素的后面插入新元素，语法简洁：

// 获取目标元素
const targetEl = document.getElementById('insert_after_this');
// 创建要插入的新元素（假设这个元素已有绑定的事件监听器）
const newEl = document.createElement('div');
newEl.addEventListener('click', () => console.log('点击了新元素'));

// 直接插入到目标元素之后
targetEl.after(newEl);

2. 使用insertBefore()方法 #

通过父元素的insertBefore方法，结合目标元素的nextSibling属性，实现“插入到目标之后”的效果：

const parentEl = document.getElementById('parent');
const targetEl = document.getElementById('insert_after_this');
const newEl = document.createElement('div');
newEl.addEventListener('click', () => console.log('点击了新元素'));

// 插入到目标元素的下一个兄弟节点之前，等同于插到目标之后
parentEl.insertBefore(newEl, targetEl.nextSibling);

3. 使用insertAdjacentElement()方法 #

通过指定'afterend'参数，在目标元素的外部后面插入元素：

const targetEl = document.getElementById('insert_after_this');
const newEl = document.createElement('div');
newEl.addEventListener('click', () => console.log('点击了新元素'));

targetEl.insertAdjacentElement('afterend', newEl);

关键注意点 #

• 以上方法无论是插入新创建的元素（已绑定监听器），还是移动页面上已有的元素（自带监听器），都能完整保留事件监听器。
• 避免使用innerHTML来插入元素，这种方式会重新解析HTML字符串创建新节点，原节点的监听器会丢失。

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