4 ms·
I assume you mean to compare it to: el.email = (function(){ var input = document.createElement('input'); input.type = "email"; retu
by zachrose 10y ago
I assume you mean to compare it to:
el.email = (function(){
var input = document.createElement('input');
input.type = "email";
return input;
})();
...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.
- sanbor 10y ago$('<input type="email">')
- mkoryak 10y agoI 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.
- megous 10y agoel.email = document.createElement('input'); el.email.type = "email";
- AgentME 10y agoel.email = Object.assign(document.createElement('input'),{type:'email'});
- ErikHuisman 10y agoel.email = { document.createElement('input'), ...{ type: 'email' }}
- klibertp 10y agoWhat supports this feature and how is it implemented?
- yawgmoth 10y agoThe ... is the spread operator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
- yawgmoth 10y ago(Too long to edit my other reply) Also used was object destructuring: http://odetocode.com/blogs/scott/archive/2014/09/11/features-of-es6-part-6-destructuring.aspx http://odetocode.com/blogs/scott/archive/2014/09/11/features...
- AgentME 10y agoI 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.
- ErikHuisman 10y agoOw 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' })` Got 4 up votes though..
- ars 10y agoWhy compare it to that? There is no reason to avoid innerHTML anymore - it's not slow at all. There is rarely a reason to build HTML using createElement, it's only sometimes needed. The majority of the time just write HTML - it's much easier. > Or you could use a templating library Or just use the built in <template> tag.
- pkstn 10y agoTemplate libraries are fine, but there are cases where you hope you could just write JavaScript..
- exomancer 10y agoNot 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.
- localvoid 10y ago>Creating elements with the DOM API is faster than innerHTML roughly by a factor of 4 on Chrome Canary last I benchmarked it yes, almost by a factor of 4 :D check out "render" test cases: https://cdn.rawgit.com/localvoid/dd96890b82f1d1268df34330b14c82a3/raw/aa03b789315a84dba047c642e7ab63fc04017692/uibench_chrome.html https://cdn.rawgit.com/localvoid/dd96890b82f1d1268df34330b14...
- ghayes 10y agoWhy did you wrap that in a closure / immediately invoked function expression?
- wingless 10y agoIt'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.