0

I've been watching tutorials and I've seen two methods to add new elements to the document. One way is to createElement in javascript and then assign classes/id to it or do whatever you want. This way the element is "in memory"...at least that's what was said in the tutorial. The other way is creating the element in CSS and then using display:none, later using JS to change display to block/inline.

Which method is better? or is it a scenario kind of answer? What are the perks of both? Or are they the same and it's just based on preference?

Sorry if this is a duplicate question, I didn't know what the methods were called.

Improve this question
4
  • 1
    Duplicate or not, this question is very opinion-based. Commented Jun 2, 2014 at 23:27
  • sooo, it's more of a preference? Commented Jun 2, 2014 at 23:33
  • 1
    Well, what I meant was that there are different situations, in some it's more natural to use one over another, in a different situation, it's the opposite. It all also depends on the background of the situation. So I don't think you could give an universal answer on a question like this. Commented Jun 2, 2014 at 23:37
  • 1
    My approach is to ask if the element will have any meaning at all with JS turned off. If it wouldn't, then I add it via JS. Commented Jun 2, 2014 at 23:46

3 Answers 3

Reset to default
2

It really depends on the circumstance. I would personally go with having the element on the page, and then just hiding or showing it as needed using the CSS display property. Browsers nowadays are fast enough where the JavaScript creation/removal of elements isn't going to be taxing the client so that isn't much of an issue, but to me it seems to be a cleaner approach from a maintainability standpoint.

It is hard to tell without knowing the context of what you are building, but often times what I will do is have a target placeholder, such as a DIV, that gets content loaded into it when that content is requested. As such, the placeholder DIV wouldn't be visible until the content gets loaded. This is useful for Single Page-like Applications where you don't want to load enormous amounts of data all at the same time, and get that content on a per request basis.

For smaller tasks, showing or hiding the element is more than sufficient especially if the content inside the element is not dynamic.

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

Comments

2

I prefer keeping markup separate from my JavaScript, in separate files (to the point where I use a template library instead of creating html in my JavaScript). I find it easier to maintain code if all markup is in the same place, and all the script is in a different place.

Other then maintainability, I don't think it matters.

Improve this answer

Comments

1

For SEO purposes, I would use the CSS method.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.