sentinel-js
Version:
JS library that detects new DOM nodes using CSS selectors
35 lines (32 loc) • 845 B
HTML
<html>
<head>
<script src="assets/sentineljs/sentinel.js"></script>
<style>
@keyframes slidein {
from {margin-left: 100%;}
to {margin-left: 0%;}
}
.my-div {
animation-duration: 3s;
animation-name: slidein, node-inserted;
}
</style>
<script>
// use the `sentinel` global object
sentinel.on('!node-inserted', function(el) {
el.innerHTML = 'The sentinel is always watching.';
});
// add a new div to the DOM
function addDiv() {
var newEl = document.createElement('div');
newEl.className = 'my-div';
newEl.innerHTML = 'test';
document.body.appendChild(newEl);
}
</script>
</head>
<body>
<button onclick="addDiv();">Add another DIV</button>
<div class="my-div">test</div>
</body>
</html>