Dynamically adding elements via Javascript versus hidden with CSS

Question

I am wondering about the pros/cons of adding elements to a page and setting display:none versus creating a function that will dynamically create the elements and append them where they need to go.

In my case I am doing a reply box that gets attached to whatever comment you want to reply to. Atm I just have it hidden via CSS and then move it to whatever node I want with an onclick function. Is there a better way? I am quite new to taking into account DOM rendering times etc, but I wanna get it right from now on.

Personally I would prefer your method. It keeps the HTML in with the HTML, and the logic in the JavaScript. — Chris Hayes
– Chris Hayes, Commented Nov 10, 2012 at 5:09

Mr. Alien · Accepted Answer · 2012-11-10 05:20:40Z

2

I would prefer using JavaScript to dynamically generate element on client side..

Reasons

You HTML will be less..
You can append that anywhere..
You don't need to use unnecessary CSS to hide/show your elements..

Even the plus side will be that if the user's browser JavaScript is turned off than it wont be a big thing as anyways as you hide the elements using CSS on load, than by using JavaScript these elements won't load at all

edited Nov 10, 2012 at 5:20

answered Nov 10, 2012 at 5:13

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

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

2 Comments

Manuel Choucino Over a year ago

+1 I agree no need to load more content than what user need. If user need more well make him interect and ask for it.

Mr. Alien Over a year ago

@BeaverusIV there's hardly any difference, it's just that you get control by just 1 javascript, because just switching styles is not fun,why not make a script, use it anywhere you want, and why load unnecessary HTML and JavaScript where you can dynamically generate it on client side? and btw performance matters when you'll be having a huge traffic, or else you wont be able to make a result about performance

mattisahuman · Accepted Answer · 2012-11-10 06:43:36Z

1

Perhaps the biggest difference between the two is that content that is included in your HTML can be crawled by search engines. DOM elements that are added via Javascript will not be.

As far as DOM rendering times, there should not be much of a difference, as long as your code is clean and well-written.

Showing & Hiding with CSS will, I'm sure, always be faster than JS.

answered Nov 10, 2012 at 6:43

mattisahuman

3242 silver badges8 bronze badges

Collectives™ on Stack Overflow

Dynamically adding elements via Javascript versus hidden with CSS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related