how can i duplicate the last element and insert it in the same array-CodePudding

<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>