JavaScript Appending and Creating and adding properties

Question

I have a question regarding, creating elements in javascript

what is the best approach when it comes to for example adding properties to a newly created element and what is better performance wise?

So question being as follows:

Create the element
Set the id property of the element
Append
THEN use the created element by refrencing its ID and adding new properties

OR

Create the element
Set the all sorts of properties of the element in question
Append

Thanks!

EDIT: Hi guys,

After doing all that you guys recommended to me, I have come to the conclusion that the second option is the best.

Create the element
Set all sorts of properties of the element in question
Append

JSperf tests:

Step 3 in the first option doesn't work. You cant reference or select an element by ID if its not in the DOM. — dezman
– dezman, Commented Apr 29, 2014 at 22:56
why you would reference the element again via a query selector. when you create it, you have already the reference !?! — timaschew
– timaschew, Commented Apr 29, 2014 at 23:00

timaschew · Accepted Answer · 2014-04-29 23:06:23Z

1

I would use DocumentFragment like this

var element= document.createDocumentFragment();

then do eveything you need with the element, and then append it to the DOM.

from https://developer.mozilla.org/en-US/docs/Web/API/document.createDocumentFragment

Since the document fragment is in memory and not part of the main DOM tree, appending children to it does not cause page reflow (computation of element's position and geometry). Consequently, using document fragments often results in better performance.

answered Apr 29, 2014 at 23:06

timaschew

16.7k6 gold badges65 silver badges79 bronze badges

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

3 Comments

user3539582 Over a year ago

JSperf based on fragment : jsperf.com/document-fragment-vs-docoment-createelement2

timaschew Over a year ago

when I run the test via the button, this is my result: dropbox.com/s/s7ktc1jk11pvqxh/… but the chart at the bottom shows something different, jsperf seems to be broken kind of

user3539582 Over a year ago

well when i look at my task manager since i dont really own a benckmark program document fragment DOES use a tad bit less memory but its not faster in all the tests i have done appreciate the screenshot!

dezman · Accepted Answer · 2014-04-29 22:57:59Z

0

I would do as follows:

Create element (maybe set attributes)
Append element
Set attributes, append children to element and anything else you want to do.

answered Apr 29, 2014 at 22:57

dezman

19.6k13 gold badges58 silver badges92 bronze badges

2 Comments

timaschew Over a year ago

and what are your reasons for this order?

dezman Over a year ago

@timaschew Because appending children to elements before they are in the dom can get messy. Usually its only a problem with iframes, but its better I believe to use templating or append an element before you add more to it.

Collectives™ on Stack Overflow

JavaScript Appending and Creating and adding properties

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related