如何用JavaScript自动在每个div内显示其自身YYYYMMDD格式的id

你有大量ID为YYYYMMDD格式的div，不想手动在内部span里重复输入ID文本，以下是两种可行的实现方式：

方案一：页面加载后批量处理（推荐） #

这种方式不需要修改每个div的内部结构，等页面DOM加载完成后一次性处理所有目标div，效率更高：

<!-- 只需要保留空的span标签 -->
<div id='20230307'>
    <span></span>
    <div>some text...<br>...<hr>...</div>
</div>
<div id='20230308'>
    <span></span>
    <div>some text...<br>...<hr>...</div>
</div>

<script>
// 等DOM全部加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 筛选所有ID为8位数字的div（匹配YYYYMMDD格式）
    const dateDivs = document.querySelectorAll('div[id]');
    dateDivs.forEach(div => {
        // 验证ID是否符合8位数字的日期格式
        if (/^\d{8}$/.test(div.id)) {
            const span = div.querySelector('span');
            if (span) {
                span.textContent = div.id;
            }
        }
    });
});
</script>

方案二：在每个div内嵌入脚本（贴近你最初的思路） #

如果想在span内部通过脚本直接生成文本，可以利用document.currentScript获取当前执行的脚本元素，进而找到父级div：

<div id='20230307'>
    <span>
        <script>
            // 获取当前脚本所在的div
            const targetDiv = document.currentScript.parentElement.parentElement;
            // 给span设置div的ID文本
            document.currentScript.parentElement.textContent = targetDiv.id;
        </script>
    </span>
    <div>some text...<br>...<hr>...</div>
</div>
<div id='20230308'>
    <span>
        <script>
            const targetDiv = document.currentScript.parentElement.parentElement;
            document.currentScript.parentElement.textContent = targetDiv.id;
        </script>
    </span>
    <div>some text...<br>...<hr>...</div>
</div>

关于你尝试的代码问题说明 #

你之前写的代码存在几个错误：

• 脚本里的this指向的是全局window对象，不是当前div；
• document.write不能直接赋值，它是一个方法，用来向文档写入内容；
• document.getElementById()需要传入具体的ID字符串，不能直接传this或未定义的id变量。

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