Блог

В моем приложении я добавляю клонированные элементы:

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

Бит, если я делаю клонирование вне области видимости, он добавляет элемент в html только один раз:

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

В чем может быть причина?

Потому что, когда вы клонируете снаружи, вы создаете только один клон, а узел может существовать только в одном месте документа. Если вы хотите избежать запроса внутри обработчика щелчков, вы можете выполнить запрос снаружи, но клонировать внутри.

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

 lt;button type="button" id="add"gt;Add a blocklt;/buttongt; lt;div id="restblocks"gt;lt;/divgt;  lt;div id="theblock" class="block hidden"gt;lt;/divgt;