如何根据BambooHR实时职位数动态重复自定义HTML职位模块？

要实现根据BambooHR实时职位数量动态生成自定义职位卡片，你需要调整HTML结构为模板复用模式，并用MutationObserver替代不可靠的setTimeout来监听外部内容加载，具体实现如下：

1. 改造HTML结构 #

将单个job-opp改为可复用的模板（用<template>标签），同时保留BambooHR的嵌入容器：

<section id="positions">
  <div class="inner">
    <div class="section-listing">
      <!-- BambooHR嵌入容器（保持隐藏） -->
      <div id="BambooHR" data-domain="xxx.bamboohr.com" data-version="1.0.0" data-departmentId="" style="display:none;"></div>
      <script src="https://xxx.bamboohr.com/js/embed.js" type="text/javascript" async defer></script>
      
      <!-- 职位卡片模板（默认不渲染） -->
      <template id="job-card-template">
        <div class="job-opp">
          <div class="job-main-content">
            <p class="job-title"></p>
            <div class="job-details">
              <div class="department-location">
                <p class="job-department"></p>
                <span>&nbsp;•&nbsp;</span>
                <p class="job-location"></p>
              </div>
            </div>
          </div>
          <div class="button button-secondary">
            <a href="" target="_blank" rel="noopener">
              <span class="text">Apply</span>
              <span class="icon">
                <Icon name="cta-arrow-right" size="16" />
              </span>
            </a>
          </div>
        </div>
      </template>
    </div>
  </div>
</section>

2. 优化JavaScript逻辑 #

用MutationObserver监听BambooHR容器的DOM变化，确保外部脚本加载完成后再动态生成卡片并填充数据：

<script>
window.addEventListener("load", function() {
  const bambooHRContainer = document.getElementById('BambooHR');
  const jobListingContainer = document.querySelector('.section-listing');
  const jobCardTemplate = document.getElementById('job-card-template');

  // 监听BambooHR容器的DOM变化，替代setTimeout
  const observer = new MutationObserver((mutations) => {
    // 检查是否已加载职位列表
    const jobItems = document.querySelectorAll('.BambooHR-ATS-Jobs-Item');
    if (jobItems.length > 0) {
      observer.disconnect(); // 停止监听，避免重复触发
      renderJobCards(jobItems);
    }
  });

  // 开始监听BambooHR容器的子元素变化
  observer.observe(bambooHRContainer, { childList: true, subtree: true });

  // 动态生成职位卡片并填充数据
  function renderJobCards(jobItems) {
    // 清空现有内容（保留模板）
    const existingJobCards = jobListingContainer.querySelectorAll('.job-opp');
    existingJobCards.forEach(card => card.remove());

    // 根据职位数量克隆模板并插入
    jobItems.forEach((jobItem) => {
      const cardClone = document.importNode(jobCardTemplate.content, true);
      
      // 填充单个职位的数据
      cardClone.querySelector('.job-title').textContent = jobItem.querySelector('a').textContent;
      cardClone.querySelector('.job-location').textContent = jobItem.querySelector('.BambooHR-ATS-Location').textContent;
      cardClone.querySelector('.job-department').textContent = jobItem.querySelector('.BambooHR-ATS-Department-Header').textContent;
      cardClone.querySelector('.button-secondary a').href = jobItem.querySelector('a').href;

      jobListingContainer.appendChild(cardClone);
    });
  }
});
</script>

关键改进说明 #

• 模板复用：用<template>标签存储职位卡片结构，避免手动拼接HTML字符串，更易维护。
• 可靠的加载监听：MutationObserver能精准捕获BambooHR内容加载完成的时机，比固定延迟的setTimeout更稳定，不会因网络快慢导致数据获取失败。
• 动态生成逻辑：根据实际职位数量克隆模板，自动匹配数据，无需手动维护静态卡片数量。
• 数据映射简化：直接针对单个职位元素提取数据，避免多元素遍历的索引匹配问题。

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