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