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
51 lines (45 loc) • 1.32 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Attach Test</title>
</head>
<body>
<div id="testContainer">hi</div>
<script type="module">
import { $, $$ } from "../index.js"
const element = document.createElement("div")
element.id = "element"
element.innerHTML = `
<div>
<span class="multiple">Multiple</span>
<span class="multiple">Multiple</span>
<span class="multiple">Multiple</span>
</div>
`
const childrenOfElement = element.querySelectorAll(".multiple")
$("#testContainer").attach([
`
<div id="parent">
<div id="originalElement">Original Element</div>
<div class="two">Two</div>
<div class="two">Two</div>
</div>
`,
`
<div id="parent2">
<div id="originalElement2">WOW!</div>
<div class="two">Cool!</div>
<div class="two">NEAT!</div>
</div>
`,
childrenOfElement,
])
$$(".multiple").css("color", "red")
// $("#testContainer").attach(childrenOfElement, {
// position: "after",
// })
</script>
</body>
</html>