如何复制最后一个元素并将其插入同一数组中

Question

<div class="ofertas container-cards-v2-2022">
<div class="card-component-v2-2022" id="card_0_1"></div>
<div class="card-component-v2-2022" id="card_0_2"></div>
<div class="card-component-v2-2022" id="card_0_3"></div>
<div class="card-component-v2-2022" id="card_0_4"></div>
</div>
var cards = ofertas.querySelectorAll('.card-component-v2-2022');
var array = [];
var id = 0;

在这里，我恢复最后一张卡，并将其插入一个新的阵列

var last_card_old = cards[cards.length - 1];
cards.forEach(function (card) {array.push(card);})
array.push(last_card_old);

它会像这个一样

<div class="ofertas container-cards-v2-2022">
<div class="card-component-v2-2022" id="card_0_1"></div>
<div class="card-component-v2-2022" id="card_0_2"></div>
<div class="card-component-v2-2022" id="card_0_3"></div>
<div class="card-component-v2-2022" id="card_0_4"></div>
<div class="card-component-v2-2022" id="card_0_4"></div>
</div>

现在我再次拯救最后一个元素来修改id，以便编号继续

var last_card_new  = array[array.length - 1];
last_card_new.setAttribute('id', 'card_' + id + '_' + (array.length + 1));
array.push(last_card_new);

但问题是，当查阅数组时，我会更改最后2个元素，而不是我想要的最后一个。

console.log(array);
<div class="ofertas container-cards-v2-2022">
<div class="card-component-v2-2022" id="card_0_1"></div>
<div class="card-component-v2-2022" id="card_0_2"></div>
<div class="card-component-v2-2022" id="card_0_3"></div>
<div class="card-component-v2-2022" id="card_0_6"></div>
<div class="card-component-v2-2022" id="card_0_6"></div>
</div>

但我需要的是这个

<div class="ofertas container-cards-v2-2022">
<div class="card-component-v2-2022" id="card_0_1"></div>
<div class="card-component-v2-2022" id="card_0_2"></div>
<div class="card-component-v2-2022" id="card_0_3"></div>
<div class="card-component-v2-2022" id="card_0_4"></div>
<div class="card-component-v2-2022" id="card_0_5"></div>
</div>

Answer 1

如果你要尝试复制DOM元素，你需要复制它。如果不是所有你要做的都是添加对同一元素的新引用。因此，当您更改引用时，就更改了元素。

在您选择所有卡的下面，我们克隆最后一张卡，更改id，并将其添加到DOM中。

var cards = document.querySelectorAll(".card-component-v2-2022");
const lastCard = cards[cards.length-1];
const card = lastCard.cloneNode();
card.id = lastCard.id.replace(/d+$/, cards.length +1 );
lastCard.parentNode.append(card)

.card-component-v2-2022 {
border: 1px solid black;
width: 100px;
height: 100px;
display: inline-block;
}

.card-component-v2-2022::after {
content: attr(id);
}

<div class="ofertas container-cards-v2-2022">
<div class="card-component-v2-2022" id="card_0_1"></div>
<div class="card-component-v2-2022" id="card_0_2"></div>
<div class="card-component-v2-2022" id="card_0_3"></div>
<div class="card-component-v2-2022" id="card_0_4"></div>
</div>

Answer 2

考虑使用DOM提供的方法

const cloneAndAppendChild = parent => parent.insertAdjacentElement(`beforeend`,
Object.assign(
parent.lastElementChild.cloneNode(), 
{id: parent.lastElementChild.id.replace(/d+$/, parent.children.length + 1),
textContent: ` => cloned from div#${parent.lastElementChild.id}`}
));
for (let i = 0; i < 9; i += 1) {
cloneAndAppendChild(document.querySelector(`.container-cards-v2-2022`));
}

.card-component-v2-2022:before {
content: attr(id);
}

<div class="ofertas container-cards-v2-2022">
<div class="card-component-v2-2022" id="card_0_1"></div>
</div>