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

Question

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?

Answer 1

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>