子元素，避免重复插入，并提供可落地的 DOM 检测方案与优化后的轮询逻辑。 本文详解如何准确判断每个 `.image-list span` 是否已包含 ` ` 子元素，避免重复插入，并提供可落地的 dom 检测方案与优化后的轮询逻辑。 在动态加载内容的网页中（例如滚动触发展示更多图片），我们常需对新插入的 DOM 节点执行初始化操作——比如为每个 .image-list span 自动添加一个说明性
标签。但若检测逻辑有误，极易导致重复插入：看似“检查是否存在”，实则误判了目标节点关系。 你原始代码的核心问题在于：
const para = document.createElement("p");
// ... 添加到 body
var elementx = document.getElementsByTagName("p")[0]; // ❌ 取的是全局第一个 p（可能在 body 里）
// 然后用 links[i].contains(elementx) 判断 —— 这是在问：“这个 span 是否包含 body 里的那个 p？” 元素”。因此只有恰好包裹了 elementx 的那个 才会返回 true，其余全部走 else 分支，每轮都新增 ，造成严重冗余。
✅ 正确做法是：
对每个 独立查询其内部是否存在 子元素
，使用 querySelector 或 querySelectorAll：
元素
if (!span.querySelector('p')) {
const p = document.createElement('p');
p.textContent = 'HHHHHHHH';
span.insertAdjacentElement('afterbegin', p);
}
});
}
// 每 5 秒检查一次新出现的 span（适用于滚动加载场景）
setInterval(ensureParagraphInSpans, 5000);
// ⚠️ 建议补充：首次加载时立即执行一次
ensureParagraphInSpans(); ，彻底解决 3 小时调试未果的重复插入难题。
function ensureParagraphInSpans() {
const spans = document.querySelectorAll('.image-list span');
spans.forEach(span => {
// ✅ 正确检测：该 span 内部是否有任意