cloneNode & replaceChild

by ndolesh

HTML

<div>
  <h1>This is my H1</h1>
  <div>
    <ul class ="some-elem">
      <li class="red">List item 1</li>
      <li class="red">List item 2</li>
      <li class="red">List item 3</li>
      <li class="red">List item 4</li>
    </ul>
  </div>
</div>

CSS

.red { color: red; }

JavaScript

const someElem = document.querySelector('.some-elem');
const clonedElem = someElem.cloneNode(true);
const clonedItems = Array.from(clonedElem.children);

for(let l = 0; l < clonedItems.length; l++) {
  clonedItems[l].classList.remove("red");
  // Do other potentially expensive DOM work...
}
// Insert the removed element back into the DOM with replaceChild(new, old)
someElem.parentElement.replaceChild(clonedElem,someElem);