const NUM = 9

const col = 3

const size = 30

const pad = 10

const box = (x, y) => Object.assign(

  document.body.appendChild(

    document.createElement('div')

  ).style, {

    position: 'absolute',

    width: size + 'px', 

    height: size + 'px',

    top: y + 'px', 

    left: x + 'px',

    background: 'red'

})

const off = (size + pad)

for (let i = 0; i < NUM; i++) {

  const x = (i % col) * off

  const y = parseInt(i / col, 10) * off

  box(x, y)

}

const lookupReplacements = {

  // entities (like ∑ or Θ - are safer

  // than just putting things inline like ∑ or ®

  'a': ['A', 'Ä', '∆', 'á'],

  'e': ['é', '∃'],

  't': ['⊤', 'Τ'] ,

  'b': ['β'],

  'o': ['∅', '_o_']

}

function mangle(s) {

  return s.split``.map(letter => {

    const chars = lookupReplacements[letter]

    return chars ? chars[

      Math.floor(

        chars.length * Math.random()

      )

    ] : letter

  }).join``

}

document.body.innerHTML = mangle('Been taking a break from making snippets... might start up again...<hr>')

document.body.innerHTML += mangle('Been taking a break from making snippets... might start up again...<hr>')

document.body.innerHTML += mangle('Been taking a break from making snippets... might start up again...<hr>')

// 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();

const unsanitized_string = "abc <script>alert(1)</script> def";  // Unsanitized string of HTML

const sanitizer = new Sanitizer();  // Default sanitizer;

// Sanitize the string

let 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) );

// true

console.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);

f = _ => f

f()()()

()()

()      () ()

  ()   ()

    ()()

     ()