使用Vanilla JS为按年份分组的div添加h2标题

需求与问题 #

• 页面内的.cm_loop_mediaposts元素已按发布日期排序，需按data-year属性进行视觉分组
• 因需保留内置loop-creator并添加search-filter，无法通过PHP实现，只能前端处理
• 疑问：是否需要添加容错机制，避免data-year属性缺失或元素不存在时引发错误？

期望效果 #

**2022**
div.cm_loop_mediaposts data-year="2022"
div.cm_loop_mediaposts data-year="2022"
div.cm_loop_mediaposts data-year="2022"
**2021**
div.cm_loop_mediaposts data-year="2021"
div.cm_loop_mediaposts data-year="2021"
**2020**
div.cm_loop_mediaposts data-year="2020"
……

当前代码 #

<script>
        var div = document.querySelector('div.cm_loop_mediaposts[data-year=&quot;2022&quot;]');
        var h2 = document.createElement('h2');
        h2.innerHTML = '2022';
        div.parentNode.insertBefore(h2, div);
</script>
<script>
        var div = document.querySelector('div.cm_loop_mediaposts[data-year=&quot;2021&quot;]');
        var h2 = document.createElement('h2');
        h2.innerHTML = '2021';
        div.parentNode.insertBefore(h2, div);
</script>
<script>
        var div = document.querySelector('div.cm_loop_mediaposts[data-year=&quot;2020&quot;]');
        var h2 = document.createElement('h2');
        h2.innerHTML = '2020';
        div.parentNode.insertBefore(h2, div);
</script>
<script>
        var div = document.querySelector('div.cm_loop_mediaposts[data-year=&quot;2019&quot;]');
        var h2 = document.createElement('h2');
        h2.innerHTML = '2019';
        div.parentNode.insertBefore(h2, div);
</script>
<script>
        var div = document.querySelector('div.cm_loop_mediaposts[data-year=&quot;2018&quot;]');
        var h2 = document.createElement('h2');
        h2.innerHTML = '2018';
        div.parentNode.insertBefore(h2, div);
</script>

对应HTML结构 #

<div id="brxe-ztzueq" class="brxe-container wpgb-enabled" data-instance="1">
  <!-- Gridbuilder Plugin -->
  <article class="brxe-siebiz brxe-block cm_loop_mediaposts" data-year="2022"><a></a></article>
  <article class="brxe-siebiz brxe-block cm_loop_mediaposts" data-year="2022"><a></a></article>
  <article class="brxe-siebiz brxe-block cm_loop_mediaposts" data-year="2022"><a></a></article>
  <article class="brxe-siebiz brxe-block cm_loop_mediaposts" data-year="2022"><a></a></article>
  <article class="brxe-siebiz brxe-block cm_loop_mediaposts" data-year="2021"><a></a></article>
  <article class="brxe-siebiz brxe-block cm_loop_mediaposts" data-year="2020"><a></a></article>
  <article class="brxe-siebiz brxe-block cm_loop_mediaposts" data-year="2019"><a></a></article>
  <article class="brxe-siebiz brxe-block cm_loop_mediaposts" data-year="2018"><a></a></article>
</div>

容错机制必要性 #

必须添加容错机制。如果目标元素不存在或data-year属性缺失，直接操作会触发Cannot read properties of null错误，导致后续脚本无法执行。

优化代码 #

以下代码自动识别所有存在的年份，无需硬编码，同时包含完整容错：

// 获取所有目标元素
const posts = document.querySelectorAll('.cm_loop_mediaposts');
let currentYear = null;

posts.forEach(post => {
    // 提取data-year属性，空值则跳过当前元素
    const year = post.dataset.year;
    if (!year) return;

    // 当年份切换时，插入对应标题
    if (year !== currentYear) {
        currentYear = year;
        const heading = document.createElement('h2');
        heading.textContent = year;
        // 将标题插入到当前元素的前一个位置
        post.parentNode.insertBefore(heading, post);
    }
});

代码优势 #

• 自动适配所有存在的年份，无需手动添加对应年份的脚本
• 跳过无data-year属性的元素，避免报错
• 仅在年份切换时创建标题，不会重复生成
• 完全保留原有的排序结构，符合需求

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