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
54 lines (48 loc) • 1.79 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Become Test</title>
</head>
<body>
<div id="testContainer"></div>
<div id="toBeReplaced">To Be Replaced</div>
<div class="replacementElements">Replacement Element</div>
<script type="module">
import { $, $$ } from "../index.js"
function becomeTest() {
const output = document.createElement("div")
const toBeReplacedEl = $("#toBeReplaced")
// const replacementEls = $$(".replacementElements")
const replacementEls = document.querySelectorAll(".replacementElements")
// const replacementEls =
// $(`<div class="replacementElements">hey what's up?
// <h2>Test</h2>
// </div>`)
toBeReplacedEl.become(replacementEls, { mode: "move" })
// toBeReplacedEl.become(
// [
// `<div class="replacementElements"><p>hey what's up?</p>
// <h2>Test</h2>
// </div>`,
// `<div class="replacementElements"><p>pussy?</p>`,
// ],
// { mode: "move" }
// ) //NO
document.getElementById("testContainer").appendChild(output)
if (
!document.getElementById("toBeReplaced") &&
document.querySelectorAll(".replacementElements").length === 1
) {
output.style.color = "green"
output.textContent = "become test PASSED"
} else {
output.style.color = "red"
output.textContent = "become test FAILED"
}
}
document.addEventListener("DOMContentLoaded", becomeTest)
</script>
</body>
</html>