En mi aplicación estoy agregando elementos clonados:
document.getElementById("add").addEventListener("click", function(){ let theblock = document.getElementById("theblock").cloneNode(true); let newer = theblock; newer.removeAttribute("id"); document.getElementById("restblocks").append(newer);Un poco si clono fuera del alcance, agrega el elemento a html solo una vez:
let theblock = document.getElementById("theblock").cloneNode(true); document.getElementById("add").addEventListener("click", function(){ let newer = theblock; newer.removeAttribute("id"); document.getElementById("restblocks").append(newer);¿Cuál podría ser la razón?
Porque cuando clona afuera, solo hace una sola clonación, y un Nodo solo puede existir en un lugar en un documento. Si desea evitar la consulta dentro del controlador de clics, puede consultar afuera, pero clonar adentro.
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>