What's the efficient way to insert elements from array to existing Html element?

Question

I have heard few approaches:

1. I could simply iterate through 20k elements and do appendChild.
2. I could insert All items into newly created div in js and then just put that div into parent dom.
3. Is there any other approach? Copy html wholesale?

However, I am confused on how to do 2. What is the best way to move all child element from div A to div B without iterating over all of them.

Answer 1

You can also use document fragment which appends all at one moment

  var fragment = document.createDocumentFragment();
  fragment.appendChild(...)
  fragment.appendChild(...)
  ...
  element.appendChild(fragment)