4 ms·

Note that you can make things even simpler than this: just use vanilla JS to compose HTML strings, and plug them into divs using innerHTML = "...". When your st

Note that you can make things even simpler than this: just use vanilla JS to compose HTML strings, and plug them into divs using innerHTML = "...". When your state changes due to user input, just rebuild the page using the new data. I've been building many simple apps using this technique, it works fine. I'm sure there is some kind of performance hit; it's almost never an issue. I have never seen any browser compatibility issues.

euph0ria 1y ago
Beware of xss
busymom0 1y ago
Make sure to sanitize the content before inserting if you use this approach. > Warning: This is a security risk if the string to be inserted might contain potentially malicious content. When inserting user-supplied data you should always consider using a sanitizer library, in order to sanitize the content before it is inserted. https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML https://developer.mozilla.org/en-US/docs/Web/API/Element/inn...
- reassess_blind 1y ago
  Anything with user input I just use innerText. Or a simple escapeHTML function within the innerHTML - but I prefer innerText in a separate pass, as using escapeHTML as a pattern gives an opportunity to forget to use it.
hdjrudni 1y ago
If the thing you need to input contains inputs, you're just throwing the user's content away.
lelanthran 1y ago
Setting innerHTML is dangerous if it is a value that came from user input. Users will be able to inject cross site scripting attacks into the forms of other users. Not saying to never sit, just saying to be aware of injection attacks on the front end.
zelphirkalt 1y ago
On one hand this approach is simple, but on the other hand I dislike treating HTML as a mere string, when it is actually a tree and treating it as such is a huge enabler, that many frameworks miss out on.
derekzhouzhen 1y ago
Yes, you can kiss reactivity good-bye and just render the whole page on any state change. No, generating HTML string and setting innerHTML is unsafe and slower than necessary. It is better to create DOM elements programmatically. HTML is for serialization of the DOM tree; if everything is done in javascript then you don't need HTML as an intermediate step.

euph0ria 1y ago

Beware of xss

busymom0 1y ago

Make sure to sanitize the content before inserting if you use this approach. > Warning: This is a security risk if the string to be inserted might contain potentially malicious content. When inserting user-supplied data you should always consider using a sanitizer library, in order to sanitize the content before it is inserted. https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML https://developer.mozilla.org/en-US/docs/Web/API/Element/inn...

reassess_blind 1y ago
Anything with user input I just use innerText. Or a simple escapeHTML function within the innerHTML - but I prefer innerText in a separate pass, as using escapeHTML as a pattern gives an opportunity to forget to use it.

hdjrudni 1y ago

If the thing you need to input contains inputs, you're just throwing the user's content away.

lelanthran 1y ago

Setting innerHTML is dangerous if it is a value that came from user input. Users will be able to inject cross site scripting attacks into the forms of other users. Not saying to never sit, just saying to be aware of injection attacks on the front end.

zelphirkalt 1y ago

On one hand this approach is simple, but on the other hand I dislike treating HTML as a mere string, when it is actually a tree and treating it as such is a huge enabler, that many frameworks miss out on.

derekzhouzhen 1y ago

Yes, you can kiss reactivity good-bye and just render the whole page on any state change. No, generating HTML string and setting innerHTML is unsafe and slower than necessary. It is better to create DOM elements programmatically. HTML is for serialization of the DOM tree; if everything is done in javascript then you don't need HTML as an intermediate step.