JSFiddle - React, Tailwind, and code Playground

HTML

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Property</td>
   <td class="header">Description</td>
  </tr>
  <tr>
   <td><code>childList</code></td>
   <td>Set to <code>true</code> if additions and removals of the target node's child elements (including text nodes) are to be observed.</td>
  </tr>
  <tr>
   <td><code>attributes</code></td>
   <td>Set to <code>true</code> if mutations to target's attributes are to be observed.</td>
  </tr>
  <tr>
   <td><code>characterData</code></td>
   <td>Set to <code>true</code> if mutations to target's data are to be observed.</td>
  </tr>
  <tr>
   <td><code>subtree</code></td>
   <td>Set to <code>true</code> if mutations to not just target, but also target's descendants are to be observed.</td>
  </tr>
  <tr>
   <td><code>attributeOldValue</code></td>
   <td>Set to <code>true</code> if <code>attributes</code> is set to <code>true</code> and target's attribute value before the mutation needs to be recorded.</td>
  </tr>
  <tr>
   <td><code>characterDataOldValue</code></td>
   <td>Set to <code>true</code> if <code>characterData</code> is set to <code>true</code> and target's data before the mutation needs to be recorded.</td>
  </tr>
  <tr>
   <td><code>attributeFilter</code></td>
   <td>Set to an array of attribute local names (without namespace) if not all attribute mutations need to be observed.</td>
  </tr>
 </tbody>
</table>

JavaScript

function REPLACE(text) {
    console.log(text);
    return text;
}

function walk(parent) {
    var walker = document.createTreeWalker(parent, 
        window.NodeFilter.SHOW_TEXT, null, false);

    var node;
    while ((node = walker.nextNode())) {
        node.textContent = REPLACE(node.textContent);
    }
}

function initMO(parent) {
    var MO = window.MutationObserver || window.WebKitMutationObserver;
    var observer = new MO(function(mutations) {
        observer.disconnect();
        mutations.forEach(function(mutation){
            var node = mutation.target;
            if (node.nodeType === document.ELEMENT_NODE)
                walk(node);
            else
                node.textContent = REPLACE(node.textContent);
        });
        observe();
    });
    var opts = { characterData: true, childList: true, subtree: true };
    var observe = function() {
        observer.takeRecords();
        observer.observe(parent, opts);
    };
    observe();
}

walk(document.documentElement);
initMO(document.documentElement);

setTimeout(function(){
    var iter = 0;
    setInterval(function() {
        var table = document.querySelector(".standard-table");
        var rowIdx = parseInt(table.rows.length * Math.random(), 10);
        var row = table.rows[rowIdx];
        if (Math.random() > 0.5) {
            // textContent test
            var colIdx = parseInt(row.cells.length * Math.random(), 10);
            var cell = row.cells[colIdx];
            cell.textContent = 'replaced textContent @' + (iter++) + ' iteration';
        }
        else {
            // innerHTML test
            row.innerHTML = '<td>replaced innerHTML</td><td>@' + (iter++) + ' iteration</td>';
        }
    }, 1000);
}, 3000);