使用insertAdjacentHTML插入未知HTML后如何选中并移除？

这里有两个可靠的方案，不用额外包裹元素就能搞定：

方案一：先解析HTML为节点，直接保存引用后插入 #

这个方法最稳妥，直接拿到插入内容对应的所有节点引用，后续移除不用查找：

// 1. 把HTML字符串解析成节点集合（临时div只是用来解析，不会插入到DOM）
const tempContainer = document.createElement('div');
tempContainer.innerHTML = contentToInsert;
const insertedNodes = Array.from(tempContainer.childNodes);

// 2. 根据指定位置插入节点（position可选值：beforebegin/afterbegin/beforeend/afterend）
const insertPosition = 'afterbegin'; // 替换成你的实际插入位置
switch (insertPosition) {
  case 'beforebegin':
    myDiv.before(...insertedNodes);
    break;
  case 'afterbegin':
    myDiv.prepend(...insertedNodes);
    break;
  case 'beforeend':
    myDiv.append(...insertedNodes);
    break;
  case 'afterend':
    myDiv.after(...insertedNodes);
    break;
}

// 3. 后续需要移除时，直接遍历删除保存的节点
// 比如在某个事件或定时器里执行：
// insertedNodes.forEach(node => node.remove());

优势：

• 没有给原始HTML套额外包裹元素，完全保留contentToInsert的结构
• 直接持有节点引用，不需要任何DOM查找逻辑，移除操作高效准确

方案二：用Range捕获插入内容（强制用insertAdjacentHTML时可选） #

如果必须使用insertAdjacentHTML，可以通过Range对象定位插入的内容：

const insertPosition = 'afterbegin'; // 替换成你的实际插入位置
let startRef, endRef;

// 先记录插入位置的参考节点
switch (insertPosition) {
  case 'beforebegin':
    startRef = myDiv.previousSibling;
    endRef = myDiv;
    break;
  case 'afterbegin':
    startRef = myDiv;
    endRef = myDiv.firstChild;
    break;
  case 'beforeend':
    startRef = myDiv.lastChild;
    endRef = myDiv;
    break;
  case 'afterend':
    startRef = myDiv;
    endRef = myDiv.nextSibling;
    break;
}

// 执行插入
myDiv.insertAdjacentHTML(insertPosition, contentToInsert);

// 创建Range定位插入的内容
const range = document.createRange();
if (insertPosition === 'beforebegin') {
  range.setStartAfter(startRef);
  range.setEndBefore(endRef);
} else if (insertPosition === 'afterbegin') {
  range.setStart(startRef, 0);
  range.setEndBefore(endRef.nextSibling);
} else if (insertPosition === 'beforeend') {
  range.setStartAfter(startRef.previousSibling);
  range.setEnd(endRef, endRef.childNodes.length);
} else if (insertPosition === 'afterend') {
  range.setStartAfter(startRef);
  range.setEndBefore(endRef);
}

// 提取插入的节点并保存引用（提取后要重新插回DOM，因为extractContents会移除它们）
const insertedNodes = Array.from(range.extractContents().childNodes);
range.insertNode(document.createRange().createContextualFragment(contentToInsert));

// 后续移除时直接操作保存的节点
// insertedNodes.forEach(node => node.remove());

这个方案需要根据插入位置做不同的Range定位，比方案一繁琐，但能满足必须用insertAdjacentHTML的场景。

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