如何使用 JavaScript 动态添加并安全移除 DOM 中的图片元素-html教程-PHP中文网

本文详解如何在 javascript 中正确添加图片到页面后，再通过 dom 操作精准移除它，避免“节点未挂载”等常见错误，并提供可复用的 whack-a-mole 类场景实践方案。

本文详解如何在 javascript 中正确添加图片到页面后，再通过 dom 操作精准移除它，避免“节点未挂载”等常见错误，并提供可复用的 whack-a-mole 类场景实践方案。

在开发类似“打地鼠”（whack-a-mole）这类交互式游戏时，常需动态插入和移除图像元素（如 mole 图片）。但初学者容易陷入一个关键误区：在元素尚未被插入 DOM 前就尝试获取并操作它——这正是原代码报错 moleNode is not of type node 的根本原因。

? 错误根源分析

原代码中：

let mole = `@@##@@`;
let moleNode = document.querySelector('.mole'); // ❌ 此时 .mole 尚未存在于 DOM！返回 null
document.querySelector('#h1').innerHTML = mole; // ✅ 此后才插入
document.querySelector('#h1').removeChild(moleNode); // ❌ 尝试移除 null → 报错

document.querySelector('.mole') 在 innerHTML 赋值之前执行，此时 DOM 中尚无 .mole 元素，查询结果为 null，后续调用 removeChild(null) 必然失败。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

✅ 正确操作顺序（两步法）

必须严格遵循：先插入 → 再查询 → 最后移除。推荐写法如下：

<div class="hole" id="hole-1"></div>

// 1. 插入 HTML 字符串
const hole = document.querySelector('#hole-1');
hole.innerHTML = `@@##@@`;

// 2. 查询刚插入的元素（确保在插入后执行）
const moleNode = hole.querySelector('.mole'); // ✅ 安全：限定在 #hole-1 内查找

// 3. 移除该元素
if (moleNode) {
  hole.removeChild(moleNode);
  // 或直接：moleNode.remove(); （更简洁，现代浏览器支持）
}

? 小技巧：element.remove() 是更现代、语义更清晰的替代方案，无需指定父节点，且兼容性良好（Chrome 27+/Firefox 23+/Edge 12+/Safari 14.1+）。若需支持旧版 IE，仍可用 parentNode.removeChild(child)。

? 注意事项与最佳实践

避免 ID 命名冲突：如原例中使用 id="h1"，易与
标签混淆，建议采用语义化命名（如 hole-1, mole-slot-5）。

批量操作优化：面对 36 个洞（.hole），不推荐为每个洞重复 querySelector + innerHTML。可封装函数：

function showMole(holeId) {
  const hole = document.getElementById(holeId);
  hole.innerHTML = `@@##@@`;
}
function hideMole(holeId) {
  const hole = document.getElementById(holeId);
  const mole = hole.querySelector('.mole');
  if (mole) mole.remove(); // 或 hole.removeChild(mole)
}