将元素附加到 HTMLcollection 的 children

Question

我正在尝试遍历 HTML 集合并将新创建的元素附加到相应的 children。如果 children 有 3 个类:

中的 1 个，我正在寻找 3 个条件

type-freebie
type-hack
type-post

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

我已经在下面粘贴了我目前所拥有的代码片段以及我试图在其后的 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));
    }

将元素附加到 HTMLcollection 的 children

Appending elements to children of HTMLcollection

html

javascript

arrays

dom-manipulation

htmlcollection