遍历HTMLcollection追加元素时仅首个匹配项生效问题求助

• 核心故障点：代码在循环外全局仅创建了3个DOM节点cf_div、ch_p、cp_a。DOM的append操作对已存在的DOM节点执行时，会将节点从原有位置移动到新位置，不会自动复制节点。因此同一类型的多个元素匹配规则时，唯一的对应节点会被不断移动，最终仅会在最后一个匹配的元素上保留，你观察到的仅第一个生效属于特殊场景下的表现，本质都是节点复用导致的问题。
• 其余可优化点：循环变量cards、card未使用let/const声明，会污染全局作用域；平行的if判断可改为else if减少不必要的判断逻辑。

const card_Group = jQuery('#latest-cst-query > .elementor-widget-container > .elementor-posts');

for (const cards of card_Group) {
  let cardChild = cards.children;
  for (const card of cardChild){
    if (card.classList.contains("type-freebie")){
      // 每次匹配到规则时单独创建新节点
      const cf_div = document.createElement("a");
      cf_div.classList.add("freebie_tax", "freebie_fcol");
      cf_div.innerText = "Freebie";
      card.firstElementChild.append(cf_div);
    } else if (card.classList.contains("type-hack")){
      const ch_p = document.createElement("a");
      ch_p.classList.add("freebie_tax", "freebie_hcol");
      ch_p.innerText = "Hack";
      card.firstElementChild.append(ch_p);
    } else if (card.classList.contains("type-post")) {
      const cp_a = document.createElement("a");
      cp_a.classList.add("freebie_tax");
      cp_a.innerText = "Blog";
      card.firstElementChild.append(cp_a);
    }
  }
}

你已经引入了jQuery，可以直接用jQuery封装的方法实现相同逻辑，更简洁也能避免原生DOM操作的常见坑：

$('#latest-cst-query > .elementor-widget-container > .elementor-posts').children().each(function() {
  const $card = $(this);
  if ($card.hasClass('type-freebie')) {
    $card.children().first().append('<a class="freebie_tax freebie_fcol">Freebie</a>');
  } else if ($card.hasClass('type-hack')) {
    $card.children().first().append('<a class="freebie_tax freebie_hcol">Hack</a>');
  } else if ($card.hasClass('type-post')) {
    $card.children().first().append('<a class="freebie_tax">Blog</a>');
  }
})

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