Creating Page Display Using JavaScript

I would like to programmatically create all the HTML elements for a web page, so I imagine I would use JavaScript. I know JavaScript has some functions for this like createElement, but it definitely seems very limited compared to just coding it in HTML. Is this when I would use something like React to create the web display? Are there other approaches? Thanks!

Frameworks like React are using the same basic DOM manipulation methods in JS that you would use to create elements and such. There are no limitations here, you can basically render your entire page/app using these JS DOM methods if you want. If you are creating a static HTML page with minimal functionality then there probably is not much of an advantage to using JS/framework. One area where JS/frameworks really shine is when your page/app has lots of functionality, especially if it results in a lot of changes to the underlying HTML. There are of course other advantages to using frameworks, too many to go into here, just google “why use a js framework” if you are interested?

I guess my question to you would be why do you want to programmatically create all the HTML elements for your web page?

1 Like

The pages I would want to create programmatically have a very simple layout. There would be a div for displaying graphics one side, a div for displaying text on the other, and a button group to move through stages text and graphics (and maybe a couple other things). There would be multiple pages with the same format, but the graphics displayed, the text, and the contents of the button group would be different for different pages. It seems to make the most sense to me to write a function which creates a page taking labels for the buttons and a function to create text/graphics as inputs. I’m not sure if there would be another way of doing it, but if there is a more reasonable approach I would want to try it out!

I was wondering what the downsides to creating web elements like divs in JavaScript as opposed to HTML were. It seems to me that it just adds to what you can do, and it doesn’t seem much harder. For example, if you have two dives side by side, one taking up 30% of the screen from the left and the other taking up 70% of the screen from the right, you could just define a single variable equal to the ratio, and modify the display just by changing the value. However, it seems to be a much less common approach. Are there situations in which it would be a bad idea to use JavaScript? Thanks.