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

Question

I have heard few approaches:

I could simply iterate through 20k elements and do appendChild.
I could insert All items into newly created div in js and then just put that div into parent dom.
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.

Please show the exact structure of source and target elements. — cFreed
– cFreed, Commented Jan 9, 2016 at 22:18
@cFreed here ` arr = [ domElement , domElement , domElement , domElement .....] ` — Muhammad Umer
– Muhammad Umer, Commented Jan 9, 2016 at 22:20
Nothing wrong with that! I knew JavaScript for so many years before jQuery came along that I can't imagine what we did without it. — Raydot
– Raydot, Commented Jan 9, 2016 at 22:40
@DaveKaye i am opposite i started with jquery and bee learning js since then — Muhammad Umer
– Muhammad Umer, Commented Jan 9, 2016 at 23:25

farincz · Accepted Answer · 2016-01-09 22:19:09Z

4

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

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

answered Jan 9, 2016 at 22:19

farincz

5,2031 gold badge33 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Strikeskids · Accepted Answer · 2016-01-09 22:31:28Z

2

According to this source the fastest is to simply iterate through the elements and append them.

Far better than creating a random div is to create a document fragment and append to that fragment. Then, said fragment can be added to the dom

var fragment = document.createDocumentFragment()
arr.forEach(el => fragment.appendChild(el))
element.appendChild(fragment)

I made a jsPerf that contains an experiment about which of these two are faster. It appears that using document fragment is the same as raw append with my limited test (one browser, one OS)

edited Jan 9, 2016 at 22:31

answered Jan 9, 2016 at 22:23

Strikeskids

4,08215 silver badges27 bronze badges

Comments

Zakaria Acharki · Accepted Answer · 2016-01-09 22:22:27Z

1

Why not just using cloneNode() in deep mode:

// Copy the element and its child nodes
var cln = itm.cloneNode(true);

// Append the cloned element to the new div with id="new_div"
document.getElementById("new_div").innerHTML(cln);

Hope this helps.

edited Jan 9, 2016 at 22:22

answered Jan 9, 2016 at 22:19

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

2 Comments

Muhammad Umer Over a year ago

wont this result in additional element in destination element

Muhammad Umer Over a year ago

eleA -> '' empty " & eleB -> "children, children, children" ......after this...... eleA -> '' eleB -> "children, children, children" " & eleB -> "children, children, children"

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related