/    Sign up×
Community /Pin to ProfileBookmark

using the appendChild

Copy linkTweet thisAlerts:
Mar 12.2007

I’m now fiddling with the DOM and I wrote a script that appends a div element 2000 times. I implemented it using setTimeout to see it append the elements in real time, and I noticed that its fast at first and gets slower and slower.
My understanding of the DOM is that its like a linked list and since it stores a pointer for the last child I don’t think appending a child shouldn’t get this much slower. What am I missing? Is there a faster way to add a lot of divs?

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@mrhooMar 12.2007 — It is not appending a div that takes time, it is redrawing the entire page every time you add a new div.

To speed the display don't redraw the page until you have appended all 2000 divs. Use a documentFragment, which has no affect on the display,and append the fragment where you want the divs. The fragment itself has no existence in the document tree, but all of its children will be appended, and drawn, at one time.

But no browser is going to draw 2000 new divs on your page instantly.
Copy linkTweet thisAlerts:
@d-kathyauthorMar 12.2007 — thank you mrhoo. That explains my test results. I googled about documentFragment and that looks like what I was looking for.
×

Success!

Help @d-kathy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...