Question

0

66

Vistas

After first append javascript is not adding a cloned item for the second time

In my application I am adding cloned elements:

        document.getElementById("add").addEventListener("click", function(){
            let theblock = document.getElementById("theblock").cloneNode(true);
            let newer = theblock;
            newer.removeAttribute("id");
            document.getElementById("restblocks").append(newer);

Bit if I do cloning outside scope it adds the element to html only once:

        let theblock = document.getElementById("theblock").cloneNode(true);
        document.getElementById("add").addEventListener("click", function(){
            let newer = theblock;
            newer.removeAttribute("id");
            document.getElementById("restblocks").append(newer);

What could be the reason?

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-09T08:06:57.259Z

Because when you clone outside you only ever make a single clone, and a Node can only exist in one place in a document. If you want to avoid the query inside the click handler you can query outside, but clone inside.

let theblock = document.getElementById("theblock");

document.getElementById("add").addEventListener("click", function(){ 
  let newer = theblock.cloneNode(true);
  ...
});

const theblock = document.getElementById('theblock');
const restblocks = document.getElementById('restblocks');

document.getElementById('add').addEventListener('click', function () {
  let newer = theblock.cloneNode(true);

  newer.removeAttribute('id');
  newer.classList.remove('hidden');

  restblocks.append(newer);
});

.block { width: 40px; height: 40px; margin: 4px; background-color: pink; }
.hidden { display: none; }

<button type="button" id="add">Add a block</button>
<div id="restblocks"></div>

<div id="theblock" class="block hidden"></div>