4 ms·
Thanks. And I'm glad xmp still lives in developers' minds. But whoa, this is approach is really impressive. That "e" function for creation and appending elemen
by myfonj 6y ago
Thanks. And I'm glad xmp still lives in developers' minds.
But whoa, this is approach is really impressive. That "e" function for creation and appending elements is witty -- I wouldn't think it is possible to have such clean and terse JS element "factory" that in effect outperforms (in character count metric) literal HTML content.
(I must confess it took me a while to wrap my head around it, so if anyone is struggling like me, this is the above code unrolled:)
var Doc = document;
var FormElem;
var BodyElem;
var AppendElem =
(
aParentElem
// reference
,
aTagElemRet
// tag name for new child, will become child itself
,
aContent
// (text) content for new child
) =>
(
aParentElem.append(aTagElemRet = Doc.createElement(aTagElemRet))
// aTagElemRet tag name (string) becomes HTMLElement
// and is immediately appended at the end of reference element
,
// comma operator evaluates both sides, returns right
aContent && aTagElemRet.append(aContent)
// if third argument is truthy, put it into the new HTMLElement
,
aTagElemRet
// expression results in this so arrow function returns the new HTMLElement
);
var InputElem = AppendElem
(
FormElem = AppendElem
(
BodyElem = Doc.body, // = parent
"form" // = tagName
), // = parent
"input" //= tagName
// no content
);
var ListElem = AppendElem(
BodyElem, // = parent
"ol" // = tagName
);
FormElem.onsubmit =
pParamLI =>
// event handler gets SubmitEvent object as a sole argument
// but it is not needed, so parameter will be reassigned to
// newly created LI element
(
AppendElem(
pParamLI = AppendElem(
ListElem, // = parent
"li", // = tagName
InputElem.value + " " // = (text) content
), // = parent
"button", // = tagName
"×" // = content
).onclick = _ => pParamLI.remove(), !1
// inline handler attached to created button
// ClickEvent passed in _ is not used
// return !1 what evaluates to false
// inline handler returning false prevents default action
// in this case form submission
// button is in default type, so "submit" would be dispatched
// on its form otherwise
);