将元素附加到 HTMLcollection 的子元素

Question

我正在尝试遍历 HTMLcollection 并将新创建的元素附加到相应的子元素。如果孩子有 3 个班级中的 1 个，我要注意 3 个条件：

1. 类型免费赠品
2. 类型破解
3. 打字帖

我已经能够设置其中的大部分并成功地将我需要的元素附加到每个不同的组，但是，当出现两个或多个不同类型时，只有一个被附加而另一个不被附加。我试图找出问题所在，我认为这与 HTMLcollections 不像数组一样工作有关，但我似乎无法将手指放在上面。

我已将代码 sn-ps 粘贴到下面，以及我试图在其后的 DOM 中操作的 HTML。

如果我可能遗漏任何见解，我将不胜感激。

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

const cf_div = document.createElement("a");
const ch_p = document.createElement("a");
const cp_a = document.createElement("a");

for (cards of card_Group) {
let cardChild = cards.children;
for (card of cardChild){
    if (card.classList.contains("type-freebie")){
       cf_div.classList.add("freebie_tax", "freebie_fcol");
       cf_div.innerText = "Freebie";
    card.firstElementChild.append(cf_div);
   } if (card.classList.contains("type-hack")){
       ch_p.classList.add("freebie_tax", "freebie_hcol");
       ch_p.innerText = "Hack";
       card.firstElementChild.append(ch_p);
   } if (card.classList.contains("type-post")) {
       cp_a.classList.add("freebie_tax");
       cp_a.innerText = "Blog";
       card.firstElementChild.append(cp_a);
   }
}
}

Answer 1

这里的问题是每个组只创建一个元素，并且在第二次附加时它实际上被移动了。

所以你需要做的是在添加新元素之前创建它。

for (card of cardChild){
    if (card.classList.contains("type-freebie")){
       let cf_div = document.createElement("a");
       cf_div.classList.add("freebie_tax", "freebie_fcol");
       cf_div.innerText = "Freebie";
       card.firstElementChild.append(cf_div);
    }

你甚至可以克隆它：

const cf_div = document.createElement("a");
cf_div.classList.add("freebie_tax", "freebie_fcol");
cf_div.innerText = "Freebie";

for (card of cardChild){
    if (card.classList.contains("type-freebie")){
      card.firstElementChild.append(cf_div.cloneNode(true));
    }