Question

I’m working on a project currently and have written the entire page in Javascript.

I created a basic function:

create_element(parent, type, style, attributes);

Example Usage:

var container = create_element(document.body, "div", {width: "100%", height: "100%"});
var header_bar = create_element(container, "div",  {width: "100%", height: "50px"});
var title_span = create_element(header_bar, "span", {fontSize: "18px", fontFamily: "arial", color: "black"});
title_span.innerHTML = "Example Website";

And so on…

I use this approach for the entire layout of the website. Is there a huge disadvantage to using this method? The obvious one is that fact that there may still be people out there with JS disabled.

Is there a tangible difference in page load times if Javascript is creating and rendering the items rather than them being hard coded into the HTML?

Thanks!

TL;DR –

Created a create_element function, and use it to draw all elements onto the screen. Including the base layout for the page.

Answer 1

There are a number of issues that you’ll run into when you try to dynamically generate non-dynamic content:

1. Maintainability will become very difficult. If you want to make a sweeping change to your site, you’re going to have to edit JS rather than just changing CSS or some HTML.
2. SEO – Google can’t index dynamic data. This is not good if you want your site to be found via search engines.
3. You are mixing your layers. By not separating concerns (your views vs. your content vs. …), you, again, increase maintainability issues and create a problem for your future-self or another developer who has to touch your code in the future.

Now, it’s not wrong to do some dynamic generation – but do it appropriately. I would highly advise against dynamically generating content for your entire site.

Update Based on Comments on Original Question

That’s great you enjoy JS. And, I definitely agree that HTML can be a bit boring. But, if you are properly separating your concerns, you really should have to write very little HTML and can quickly get back to what you enjoy coding in. But, be careful that you are not trying to force fit a language into something it was not meant to do when another language was created to do it perfectly. (Hammer/Nail Rule)

Also, don’t forget that HTML5 and CSS3 is extremely powerful. You can do a lot with it and never have to even touch JS (assuming that meets client needs).