如何用insertAdjacentHTML替代innerHTML实现内容替换并保留事件监听？

首先要明确：insertAdjacentHTML本身只负责插入内容，不提供替换功能。要实现“替换”效果，得先清空目标容器的现有内容，再插入处理后的新内容，但这种方式和直接赋值innerHTML一样，还是会丢失容器内原有子元素的事件监听器——因为清空操作会移除所有子节点，事件绑定也会随之失效。

如果你核心需求是修改文本内容同时保留事件监听器，更合理的做法是直接操作DOM文本节点，而非替换整个容器的HTML。以下是两种可行方案：

方案1：用insertAdjacentHTML实现替换效果（仅适合容器内无需要保留的事件绑定元素） #

如果容器内原本就没有带事件的子元素，只是单纯要替换内容，可以先清空容器，再插入处理后的HTML：

function mark(it) {
    clearIt();
    if (it.length > 0) {
        let c = new RegExp(it, "ig");
        let sentences = document.getElementById('sentences');
        // 先清空容器内容
        while (sentences.firstChild) {
            sentences.removeChild(sentences.firstChild);
        }
        // 插入处理后的新内容
        sentences.insertAdjacentHTML('beforeend', sentences.innerHTML.replace(c, "<mark>" + it + "</mark>"));
    }
}

注意：这种方式本质还是替换了所有内容，和innerHTML赋值一样会丢失事件，只适合容器内无需要保留事件的场景。

方案2：遍历文本节点精准替换（保留事件监听器） #

这是更优的方案，直接定位文本节点进行替换，不会影响容器内其他带事件的元素：

function mark(it) {
    clearIt();
    if (it.length === 0) return;

    let c = new RegExp(it, "ig");
    let sentences = document.getElementById('sentences');
    
    // 递归遍历所有文本节点
    function traverse(node) {
        if (node.nodeType === Node.TEXT_NODE) {
            let text = node.textContent;
            let match;
            let lastIndex = 0;
            let parent = node.parentNode;

            // 分割文本并插入mark标签
            while ((match = c.exec(text)) !== null) {
                // 插入匹配前的文本
                if (match.index > lastIndex) {
                    parent.insertBefore(document.createTextNode(text.slice(lastIndex, match.index)), node);
                }
                // 创建mark元素并插入匹配的文本
                let mark = document.createElement('mark');
                mark.textContent = match[0];
                parent.insertBefore(mark, node);
                lastIndex = c.lastIndex;
            }
            // 插入剩余文本并移除原节点
            if (lastIndex < text.length) {
                parent.insertBefore(document.createTextNode(text.slice(lastIndex)), node);
            }
            parent.removeChild(node);
        } else if (node.nodeType === Node.ELEMENT_NODE && node.tagName !== 'MARK') {
            // 跳过已标记的元素，避免重复处理
            Array.from(node.childNodes).forEach(traverse);
        }
    }

    traverse(sentences);
}

function clearIt() {
    let sentences = document.getElementById('sentences');
    // 移除所有mark标签，恢复原文本
    let marks = sentences.querySelectorAll('mark');
    marks.forEach(mark => {
        let parent = mark.parentNode;
        parent.insertBefore(document.createTextNode(mark.textContent), mark);
        parent.removeChild(mark);
    });
}

这个方案会逐个处理文本节点，把匹配的文本用<mark>包裹，完全不会影响容器内其他元素的事件监听器，同时clearIt函数也能正确移除标记恢复原内容。

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