为何修改innerHTML后，无法用remove()删除createElement创建的DOM元素？

问题场景 #

先通过DOM API创建并添加元素：

const myDiv = document.createElement('div');
container.appendChild(myDiv);

随后执行innerHTML拼接操作：

container.innerHTML += '<div class="myClass">Another New Div</div>';

此时调用myDiv.remove()却无法删除页面上的第一个元素，但如果在修改innerHTML前调用myDiv.remove()就能正常生效，这是为什么？

完整示例代码：

JavaScript代码

const myDiv = document.createElement('div');
myDiv.textContent = 'Hello';
document.getElementById('container').append(myDiv);
container.innerHTML += '<div class="myClass">Another New Div</div>';
myDiv.remove(); // 此处无法删除页面上的元素

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="container"></div>
</body>
</html>

原因解析 #

核心问题在于**innerHTML += 操作会完全重建容器内的DOM结构**：

• 当执行container.innerHTML += ...时，浏览器会先把容器内现有所有DOM节点转换成HTML字符串
• 将你新增的HTML字符串拼接到这个字符串后面
• 最后把拼接后的完整字符串重新解析成全新的DOM节点，替换掉容器原来的所有子元素

这就导致：原来通过document.createElement创建的myDiv节点，已经被从DOM树中移除，页面上现在显示的第一个<div>是重新解析生成的新节点，和你手里保存的myDiv引用不是同一个对象。

此时调用myDiv.remove()，虽然这个节点还存在于内存中，但它已经不在DOM树上了，所以页面上不会有任何变化。而如果在修改innerHTML前调用myDiv.remove()，此时myDiv还挂载在DOM树上，自然能正常移除。

解决方法 #

方法一：使用DOM API添加新元素（推荐）

避免使用innerHTML修改内容，而是用DOM API创建并添加新元素，这样不会破坏原有节点的引用：

const myDiv = document.createElement('div');
myDiv.textContent = 'Hello';
const container = document.getElementById('container');
container.append(myDiv);

// 用DOM API创建并添加新元素
const newDiv = document.createElement('div');
newDiv.className = 'myClass';
newDiv.textContent = 'Another New Div';
container.append(newDiv);

// 此时调用myDiv.remove()可以正常删除元素
myDiv.remove();

方法二：修改innerHTML后重新获取元素引用

如果一定要用innerHTML，修改后需要重新获取页面上的元素引用再执行删除：

const myDiv = document.createElement('div');
myDiv.textContent = 'Hello';
const container = document.getElementById('container');
container.append(myDiv);

// 修改innerHTML
container.innerHTML += '<div class="myClass">Another New Div</div>';

// 重新获取页面上的第一个子元素
const currentFirstDiv = container.firstElementChild;
currentFirstDiv.remove(); // 此时可以正常删除

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