WordPress无限滚动页面：如何为div生成唯一ID解决脚本重复渲染问题

问题根源 #

你遇到的问题核心是页面存在重复ID（here1），而document.getElementById()只会返回页面中第一个匹配该ID的元素，所以新加载的脚本都会把内容渲染到第一篇文章的div里，同时重复ID本身也违反了HTML规范。

最简单的解决方案（无需修改HTML结构） #

只需要修改text1.js的内容，让脚本自动定位到自己所在的div，不用依赖固定ID：

// 获取当前正在执行的脚本标签
const currentScript = document.currentScript;
// 找到这个脚本所在的父容器（就是你要添加内容的div）
const targetContainer = currentScript.parentElement;
// 创建新内容并添加到容器中
const newContent = document.createElement('div');
newContent.textContent = 'Hello!';
targetContainer.appendChild(newContent);

原理：每篇文章里的text1.js都是独立加载执行的，document.currentScript会精准指向当前运行的脚本标签，通过parentElement就能拿到它所在的div，彻底避免容器混淆。

备选方案（使用唯一ID，适合需要保留ID的场景） #

如果你需要给每个div设置唯一ID，可以借助WordPress文章的自带ID生成，步骤如下：

1. 修改WordPress模板里的HTML代码，把固定ID换成动态生成的唯一ID：

<article>
  <div id="here-<?php the_ID(); ?>">
    <script type="text/javascript" src="text1.js" data-target-id="here-<?php the_ID(); ?>"></script>
  </div>
</article>

这里<?php the_ID(); ?>会自动替换成当前文章的唯一ID，生成类似here-123、here-456这样的不重复ID。

2. 修改text1.js的内容，读取脚本标签里的data-target-id属性定位容器：

const currentScript = document.currentScript;
// 获取脚本标签预设的目标容器ID
const targetId = currentScript.dataset.targetId;
const targetContainer = document.getElementById(targetId);
const newContent = document.createElement('div');
newContent.textContent = 'Hello!';
targetContainer.appendChild(newContent);

注意事项 #

• 页面中永远不要使用重复ID，这会引发各种DOM查找问题，是HTML基础规范要求。
• 第一种方案无需修改WordPress模板，仅改动JS文件，操作更简单，优先推荐。

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