...or something similar. Your could also use createContextualFragement or a little function that uses innerHTML, both of which parse a string into HTML (which is problematic). Or you could use a templating library, of which there are many and this is one.
I know about the spread operator, but I'm pretty sure that's invalid. `var foo = { document.createElement('input') };` doesn't work, spread or no spread after it.
Ow man.. I saw the Object.assign example and thought i don't like it because it requires an extra polyfill. I can just use a spread and let babel handle it.
If anything it should be `var email = {...document.createElement('input'), type: 'email'}`
But that would result in `Object.assign({}, document.createElement('input'), { type: 'email' })`
I recently had the pleasure of tracking down the source code for how this works. There are a few methods, but the main one is at least a hundred lines long.
It's a way of hiding local variables. Old "var" variables are function scoped, so you can't even hide them in if-blocks or for-blocks, which makes scope leakage even worse.
If you're a JS programmer you should definitely read Crockford's famous JS book, it explains a lot of JS patterns and the rationale behind them.
Not slow compared to what? Creating elements with the DOM API is faster than innerHTML roughly by a factor of 4 on Chrome Canary last I benchmarked it, DOM mutations with bindings are even faster. There is a reason why React switched from innerHTML to generating DOM.
