InnerHTML 更改功能 JAVASCRIPT/JQUERY

Question

i have 'ul li', where is text, i want that when text in 'li' changes after click happen something, for example console.log. here is my code example:

html:

<ul>
<li>first</li>
</ul>

<button>click</button>

javascript:

document.queryselector('button').addEventListener('click', function(){
let list = document.queryselector('li');
let text = list.innerHTML = 'second';
if(list.changed){
  console.log(changed);
}
});

Answer 1

One way to do this is with a MutationObserver.

 document.querySelector('button').addEventListener('click', function(){ let list = document.querySelector('li'); let text = list.innerHTML = 'second'; }); const observer = new MutationObserver(function(mutationsList, observer) { for(let mutation of mutationsList) { // This will handle changes to the innerHTML, though the check isn't // really necessary since this is the only change we're observing if (mutation.type === 'childList') { console.log(mutation.target); } } }); observer.observe(document.getElementById("testNode"), { attributes: false, childList: true, subtree: false });

 <ul> <li id="testNode">first</li> </ul> <button>click</button>

MutationObserver reference

This is a general way to watch for changes, but depending on the end goal of watching for the change there may be better ways to handle this situation. For example, if you know that the only way you'll end up changing the element is through clicking the button, I'd recommend that you route all of your handling through the same place.