Skip to content

Instantly share code, notes, and snippets.

@hising

hising/dom.html

Last active June 21, 2020 13:17
Show Gist options
  • Save hising/5c2194878009b52aa12f0719c53d4537 to your computer and use it in GitHub Desktop.
Save hising/5c2194878009b52aa12f0719c53d4537 to your computer and use it in GitHub Desktop.
Download ZIP
vanilla DOM elements
Raw
dom.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script>
const txt = (text) => document.createTextNode(text);
const elm = (tagName, props = {}, children = []) => {
const item = document.createElement(tagName);
Object.assign(item, props);
item.append(...children);
return item;
};
let div = elm("div", { id: "myDiv" }, [
txt("Wow"),
elm("span", { className: "wow-class" }, [txt("Wow in Span")]),
]);
document.getElementById("app").appendChild(div);
</script>
</body>
</html>
Raw
funcs.js
const txt = (text) => document.createTextNode(text);
const elm = (tagName, props = {}, children = []) => {
const item = document.createElement(tagName);
Object.assign(item, props);
item.append(...children);
return item;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment