JavaScript嵌套函数+for循环无输出：无法在指定Div创建P元素

别慌，控制台没报错但没输出，大概率是代码执行时机不对，或者元素选择逻辑出了小问题。结合你的HTML结构，我一步步帮你排查和解决：

1. 先排查最常见的坑：脚本执行时机 #

如果你的JS代码写在<head>里，或者DOM还没渲染完成就运行了，那document根本找不到目标元素，自然没任何效果。

解决办法二选一：

• 把脚本标签移到HTML的</body>闭合标签之前，确保DOM已经全部加载完毕
• 用DOMContentLoaded事件包裹你的代码，确保DOM就绪后再执行：

document.addEventListener('DOMContentLoaded', function() {
  // 你的核心逻辑放在这里
});

2. 确认元素选择器是否正确 #

你的需求是操作嵌套在.background里的.example元素，选择器一定要写对才能定位到目标。

正确的选择器写法 #

要选中所有符合条件的.example，用这个选择器就对了：

const targetDivs = document.querySelectorAll('.background .example');

它会精准匹配所有父级是.background的.example元素，完全贴合你的HTML结构。

3. 两种场景的具体实现代码 #

场景1：给已有的.num元素填充内容 #

你的HTML里已经自带<p class="num"></p>，如果是想给这些p标签加内容，代码可以这么写：

document.addEventListener('DOMContentLoaded', function() {
  const exampleDivs = document.querySelectorAll('.background .example');
  
  exampleDivs.forEach((div, index) => {
    // 找到当前.example里的.num元素
    const numPara = div.querySelector('.num');
    if (numPara) {
      numPara.textContent = `这是第${index + 1}个示例段落`;
      console.log('已填充内容:', numPara.textContent); // 加个日志方便验证
    }
  });
});

场景2：在.example里新建P元素 #

如果是要新增p元素（不是用已有的），代码可以这么写：

document.addEventListener('DOMContentLoaded', function() {
  const exampleDivs = document.querySelectorAll('.background .example');
  
  exampleDivs.forEach((div, index) => {
    // 创建新的p元素
    const newPara = document.createElement('p');
    newPara.textContent = `新增的第${index + 1}个段落`;
    // 把新p元素添加到.example里
    div.appendChild(newPara);
  });
});

4. 验证方法 #

• 运行代码后，按F12打开开发者工具，切换到Elements标签，查看.example元素内部是否有新增/填充的内容
• 可以在代码里加console.log(targetDivs.length)，如果输出0，说明选择器或执行时机还有问题

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