jessquery
Version:
Modern JavaScript is pretty good, but typing document.querySelector() is a pain. This is a tiny library that makes DOM manipulation easy. jQuery is around 80kb (30kb gzipped), while this is only around 8kb (3.5kb gzipped). Lots of JSDoc comments so it's s
50 lines (41 loc) • 1.66 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DOM Manipulation with $ and $$</title>
</head>
<body>
<div id="content">
<p class="paragraph">This is a paragraph.</p>
<p class="paragraph">This is another paragraph.</p>
</div>
<script type="module">
import { $, $$ } from "../index.js"
// const paragraphs = $$(".paragraph")
// paragraphs.css("color", "blue")
// contentDiv.attach(
// '<p class="prepended">This is a prepended paragraph.</p>',
// { position: "prepend" }
// )
//
// contentDiv.attach(
// '<p class="attached">This is an appended paragraph.</p>',
// )
const unsafeHtml =
`<img src="x" onerror="alert(\'XSS Attack\')">
<span style="color: red">This is a span.</span>
<p class="paragraph">This is a paragraph.</p>
<p class="paragraph">This is another paragraph.</p>
<script>alert("No worries!")<` + `/script>`
const sanitizer = new Sanitizer({
allowElements: ["p"],
})
const contentDiv = $("#content").sanitize(unsafeHtml, { sanitizer })
// const noWorries = `<scr` + `ipt>alert("No worries!")</scr` + `ipt>`
// const contentDiv = $("#content").html(noWorries)
// contentDiv.attach(unsafeHtml, { sanitize: false }) // will not get sanitized-- will trigger alert
// contentDiv.attach(unsafeHtml) // will get sanitized-- so only one alert will trigger
</script>
</body>
</html>