1. Один и тот же элемент не может быть в нескольких местах!
2. getElementsByClassName - живая выборка. Когда вы заменяете один элемент на другой, он исчезает из
DOM и, соответственно, из
box.
/* box = getElementsByClassName("box"); */
while(box.length) {
box[0].replaceWith(a.cloneNode());
}
/*
Или можно сделать так:
box = document.querySelectorAll(".box");
*/
for(var i = 0; i < box.length; i++) {
box[i].replaceWith(a.cloneNode());
}
3. replaceWith еще не поддерживается современными браузерами, необходим поллифил. Надеюсь, вы это знаете.
Element.prototype.replaceWith = function(e){
this.parentNode.insertBefore(e, this);
this.remove();
}
