const d = document.body.appendChild(
document.createElement`div`)
d.innerHTML = `
<input id="input"
type="range"
min="-2" max="5"
value="0">
`
let val = 0;
console.log('drag slider...')
const range = (input.max - input.min);
input.oninput = () => {
val = (input.value - input.min) / range
console.log(input.value + ' - normalized = ' + val)
}
// Select the node that will be observed for mutationsconst 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 observedconst 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 functionconst observer = new MutationObserver(callback);
// Start observing the target node for configured mutationsobserver.observe(targetNode, config);
// Later, you can stop observingobserver.disconnect();
This is pure gold if you haven’t used it… (from MDN)
const unsanitized_string = "abc <script>alert(1)</script> def"; // Unsanitized string of HTML
const sanitizer = new Sanitizer(); // Default sanitizer;
// Sanitize the stringlet sanitizedDiv = sanitizer.sanitizeFor("div", unsanitized_string);
//We can verify the returned element type, and view sanitized HTML in string form:console.log( (sanitizedDiv instanceof HTMLDivElement) );
// trueconsole.log(sanitizedDiv.innerHTML)
// "abc def"// At some point later ...// Get the element to update. This must be a div to match our sanitizeFor() context.// Set its content to be the children of our sanitized element.document.querySelector("div#target").replaceChildren(sanitizedDiv.children);
Interesting… From MDN
<!-- 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…
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…