DOM生成用便利ツール
✂ from innerHTMLから逃げたい(JavaScript)
code:一括.js
let h=(e,t,r)=>{let n=document.createElement(e);for(let e in t)n.setAttribute(e,te);for(let e of r)n.append(e);return n},svg=(e,t,r)=>{let n=document.createElementNS("http://www.w3.org/2000/svg",e);for(let e in t)n.setAttribute(e,te);for(let e of r)n.append(e);return n};
123バイトのDOM用便利ツール
let h=(e,t,r)=>{let n=document.createElement(e);for(let e in t)n.setAttribute(e,t[e]);for(let e of r)n.append(e);return n};
code:long.js
let h = (tagName, attributes, childrens) => {
let element = document.createElement(tagName);
for (let attributeName in attributes) {
element.setAttribute(attributeName, attributesattributeName);
}
for (let childrenElement of childrens) {
element.append(childrenElement);
}
return element;
};
svg版
let svg=(e,t,r)=>{let n=document.createElementNS("http://www.w3.org/2000/svg",e);for(let e in t)n.setAttribute(e,t[e]);for(let e of r)n.append(e);return n};
code:svg.js
let svg = (tagName, attributes, childrens) => {
let element = document.createElementNS("http://www.w3.org/2000/svg",tagName);
for (let attributeName in attributes) {
element.setAttribute(attributeName, attributesattributeName);
}
for (let childrenElement of childrens) {
element.append(childrenElement);
}
return element;
};
使い方
code:script2-fork2-fork.js
h("div", {}, [
h("h1", { class: "sample" }, "タイトル"),
h("p", {}, "本文"),
]);
✂ to DOM生成用便利ツール メソッドチェーン版