Mutation Observer
// Select the node that will be observed for mutations
const targetNode = document.getElementById('some-id');
// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
// Use traditional 'for loops' for IE 11 (goodbye IE11!!!!)
for(const mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('A child node has been added or removed.');
}
else if (mutation.type === 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
}
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
// Later, you can stop observing
observer.disconnect();
This is pure gold if you haven’t used it… (from MDN)
W3Schools Output Tag
<!-- from w3schools.com -->
<!DOCTYPE html>
<html>
<body>
<h1>The output element</h1>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">
+<input type="number" id="b" value="25">
=<output name="x" for="a b"></output>
</form>
<p><strong>Note:</strong> The output element is not supported in Edge 12 (or earlier).</p>
</body>
</html>
I like w3Schools.
This code has some problems… but… for a cool little snippet to play with – I think that’s ok. SnippetZone certainly has tons of things like this…
Escape HTML
const el = document.createElement('div')
const txt = document.createElement('textarea')
txt.innerHTML = '× © <script>alert("bang!")<\/script>'
el.innerText = txt.innerText
document.body.appendChild(el)
const theHtml = document.createElement('div')
theHtml.innerText = txt.innerHTML
document.body.appendChild(theHtml)
Just a hack to escape html strings… guessing most would use a lib for this…