<div >
<div id="card_0_1"></div>
<div id="card_0_2"></div>
<div id="card_0_3"></div>
<div id="card_0_4"></div>
</div>
var cards = ofertas.querySelectorAll('.card-component-v2-2022');
var array = [];
var id = 0;
here I restore the last card and insert it into a new array
var last_card_old = cards[cards.length - 1];
cards.forEach(function (card) {array.push(card);})
array.push(last_card_old);
it would stay like this
<div >
<div id="card_0_1"></div>
<div id="card_0_2"></div>
<div id="card_0_3"></div>
<div id="card_0_4"></div>
<div id="card_0_4"></div>
</div>
Now I rescue the last element again to modify the id so that the numbering continues
var last_card_new = array[array.length - 1];
last_card_new.setAttribute('id', 'card_' id '_' (array.length 1));
array.push(last_card_new);
but the problem is that when consulting the array I change the last 2 elements, not the last one as I intended.
console.log(array);
<div >
<div id="card_0_1"></div>
<div id="card_0_2"></div>
<div id="card_0_3"></div>
<div id="card_0_6"></div>
<div id="card_0_6"></div>
</div>
but what i need is this
<div >
<div id="card_0_1"></div>
<div id="card_0_2"></div>
<div id="card_0_3"></div>
<div id="card_0_4"></div>
<div id="card_0_5"></div>
</div>
CodePudding user response:
If you are going to try to make a duplicate of a DOM element, you need to make a copy of it. If not all you are doing is adding a new reference to the same element. So when you change that reference you change the element.
Below you select all the cards, we clone the last one, we change the id, and add it to the 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 >
<div id="card_0_1"></div>
<div id="card_0_2"></div>
<div id="card_0_3"></div>
<div id="card_0_4"></div>
</div>
CodePudding user response:
Consider using the methods the DOM provides
cloneAndInsertElement();
function cloneAndInsertElement() {
const ccs = document
.querySelectorAll(`.card-component-v2-2022`);
document
.querySelector(`.container-cards-v2-2022`)
.insertAdjacentHTML(
`beforeend`,
document
.querySelector(`.card-component-v2-2022:last-child`)
.outerHTML );
const nwElem = document
.querySelector(`.card-component-v2-2022:last-child`);
nwElem.id = `card_0_${ccs.length 1}`;
nwElem.textContent = ccs.length 1;
}
<div >
<div id="card_0_1">1</div>
<div id="card_0_2">2</div>
<div id="card_0_3">3</div>
<div id="card_0_4">4</div>
</div>