Use MutationObserver compare old and new text content

Question

I need to compare the text within the children of an element from before and after the change occurred. I can get the function to trigger using the below script and return the new value but I also need to be able to access the old value.

$('#changeButton').click(
  function() {
    var currentValue = parseInt($('#changingElement').text())
    $('#changingElement').text(currentValue+1);
  }
)


$(function() {
    var parentOfChangingElement = document.getElementById("changingElementParent");
    var alertOldAndNewValue = function() {
      alert("I'm unsure how I get the 'old' value");
      alert('New value: ' + $('#changingElementParent').text());
    }
    var observer = new MutationObserver(function(e) {
      alertOldAndNewValue();
    });
    observer.observe(parentOfChangingElement, {
      subtree: true,
      childList: true
    });
});

.button {
  border: 1px solid black;
  font-weight: normal;
  margin-bottom: 10px;
  padding: 10px;
  width: fit-content;
}
.button:hover {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<div id="changeButton" class="button">
  Click me to change value
</div>

<div id="changingElementParent">
  <div>
    <div id="changingElement">
      100
    </div>
  </div>
</div>

If anyone has any ideas then I would be very grateful.

Thank you in advance!

Answer 1

Are you required to use Mutation Observer? Or is OK to use a global variable?

There are so many ways to do it... Bellow is the fastest solution. I can update it based on your feedback, therefore feel free to ask me anything in Comment section.

The simplest way to keep track of previous value is to save it all the time at the end of processing function.

In the example bellow, at the end of changeButton function, I just updated previousValue to be equal with newValue.

When the page initial loads, previousValue is equal with currentValue.

// global variable
const changeBtn   = document.getElementById('changeButton');
const target      = document.getElementById('changingElement');


// Save previous_value in a data attribute, if global variables are not an option
target.dataset.previousValue = parseInt(target.innerText);

changeBtn.addEventListener('click', function(e){

    let previousValue = target.dataset.previousValue
        currentValue  = parseInt(target.innerText),
        newValue      = currentValue + 1;
    
    target.innerText = newValue;
    
    console.log('ClasicWay: previous value is ' + previousValue);
    console.log('ClasicWay: new value is ' + newValue);
    
    // all processing ended at this point, 
    // so we can update or previousValue to currentValue
    target.dataset.previousValue = currentValue;
})




//  Observer way
const observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        console.log("MutationObserverWay: previous value is ", mutation["removedNodes"][0]["nodeValue"]);
        console.log("MutationObserverWay: new value is ", mutation["addedNodes"][0]["nodeValue"]);
    });
});

    
observer.observe(
  target, 
  {
    childList: true,
  }
);

.button {
  border: 1px solid black;
  font-weight: normal;
  margin-bottom: 10px;
  padding: 10px;
  width: fit-content;
}
.button:hover {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<div id="changeButton" class="button">
  Click me to change value
</div>

<div id="changingElementParent">
  <div>
    <div id="changingElement">100</div>
  </div>
</div>